WorkRoot/WorkRoot-WRNexusJSComponent
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed 2026-09-30 16:50:22 +05:30
1 parent bec9ef2889
commit c0ac38c572
171 files changed
+21983 -35658
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/layouts/document.wrn
+2
View File
@@ -1,5 +1,7 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly. // Generated by scripts/generate-showcase.mjs. Do not edit directly.
layout Document { layout Document {
runtime = "server"
props { props {
cookies = {} cookies = {}
theme = "light" theme = "light"
app/layouts/gallery.wrn
+8
View File
@@ -0,0 +1,8 @@
layout Gallery {
view {
<div class="gallery-shell">
<header class="gallery-header"><a href="/preview" class="showcase-brand">WRNexus UI</a><nav aria-label="Main navigation"><a href="/docs">Components</a><a href="/preview">Examples</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav></header>
<main class="gallery-main"><slot /></main>
</div>
}
}
app/layouts/showcase.wrn
+11 -12
View File
@@ -9,7 +9,7 @@ layout Showcase {
<label class="docs-search"><span class="icon-[lucide--search] size-4" aria-hidden="true"></span><input type="search" placeholder="Search documentation..." data-docs-search /><kbd>⌘ K</kbd></label> <label class="docs-search"><span class="icon-[lucide--search] size-4" aria-hidden="true"></span><input type="search" placeholder="Search documentation..." data-docs-search /><kbd>⌘ K</kbd></label>
</div> </div>
<div class="showcase-header-end"> <div class="showcase-header-end">
<nav aria-label="Primary navigation" class="showcase-nav"><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav> <nav aria-label="Primary navigation" class="showcase-nav"><a href="/preview">Examples</a><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav>
<button type="button" class="showcase-theme" data-design-panel-toggle aria-label="Customize design"><span class="icon-[lucide--palette] size-5" aria-hidden="true"></span></button> <button type="button" class="showcase-theme" data-design-panel-toggle aria-label="Customize design"><span class="icon-[lucide--palette] size-5" aria-hidden="true"></span></button>
</div> </div>
</header> </header>
@@ -26,24 +26,19 @@ layout Showcase {
<aside class="docs-directory" data-docs-directory> <aside class="docs-directory" data-docs-directory>
<nav aria-label="Documentation directory"> <nav aria-label="Documentation directory">
<section class="docs-directory-group docs-directory-guides"><strong>Getting Started</strong><div><a href="/docs">Introduction</a><a href="/installation">Installation</a><a href="/framework-guides">Framework guides</a><a href="/accessibility">Accessibility</a><a href="/resources">Resources</a></div></section> <section class="docs-directory-group docs-directory-guides"><strong>Getting Started</strong><div><a href="/docs">Introduction</a><a href="/installation">Installation</a><a href="/framework-guides">Framework guides</a><a href="/accessibility">Accessibility</a><a href="/resources">Resources</a></div></section>
<section class="docs-directory-group docs-directory-guides"><strong>WRNexusJS v0.6</strong><div><a href="/v06-types">Types</a><a href="/v06-functions">Functions</a><a href="/v06-outputs">Outputs</a><a href="/v06-stores">Stores</a><a href="/v06-imports">Imports</a><a href="/v06-state">State</a><a href="/v06-runtime">Runtime</a><a href="/v06-migration">Migration</a></div></section>
<section class="docs-directory-group docs-directory-guides"><strong>Customization</strong><div><a href="/dark-mode">Dark Mode</a><a href="/themes">Themes <small>New</small></a><a href="/colors">Colors <small>New</small></a><a href="/fonts">Fonts</a><a href="/sizing">Sizing</a></div></section> <section class="docs-directory-group docs-directory-guides"><strong>Customization</strong><div><a href="/dark-mode">Dark Mode</a><a href="/themes">Themes <small>New</small></a><a href="/colors">Colors <small>New</small></a><a href="/fonts">Fonts</a><a href="/sizing">Sizing</a></div></section>
<section class="docs-directory-group">
<a class="docs-directory-heading" href="/advanced-forms">Advanced Forms</a>
<div><a data-docs-component-link href="/components/advanced-select">Advanced Select</a><a data-docs-component-link href="/components/combo-box">Combo Box</a><a data-docs-component-link href="/components/input-number">Input Number</a><a data-docs-component-link href="/components/pin-input">Pin Input</a><a data-docs-component-link href="/components/strong-password">Strong Password</a><a data-docs-component-link href="/components/toggle-count">Toggle Count</a><a data-docs-component-link href="/components/toggle-password">Toggle Password</a></div>
</section>
<section class="docs-directory-group"> <section class="docs-directory-group">
<a class="docs-directory-heading" href="/base">Base</a> <a class="docs-directory-heading" href="/base">Base</a>
<div><a data-docs-component-link href="/components/accordion">Accordion</a><a data-docs-component-link href="/components/alert">Alert</a><a data-docs-component-link href="/components/avatar">Avatar</a><a data-docs-component-link href="/components/avatar-group">Avatar Group</a><a data-docs-component-link href="/components/badge">Badge</a><a data-docs-component-link href="/components/blockquote">Blockquote</a><a data-docs-component-link href="/components/button">Button</a><a data-docs-component-link href="/components/button-group">Button Group</a><a data-docs-component-link href="/components/card">Card</a><a data-docs-component-link href="/components/carousel">Carousel</a><a data-docs-component-link href="/components/chat-bubble">Chat Bubble</a><a data-docs-component-link href="/components/collapse">Collapse</a><a data-docs-component-link href="/components/date-picker">Date Picker</a><a data-docs-component-link href="/components/device-frame">Device Frame</a><a data-docs-component-link href="/components/file-upload-progress">File Upload Progress</a><a data-docs-component-link href="/components/legend-indicator">Legend Indicator</a><a data-docs-component-link href="/components/list">List</a><a data-docs-component-link href="/components/list-group">List Group</a><a data-docs-component-link href="/components/marquee">Marquee</a><a data-docs-component-link href="/components/progress">Progress</a><a data-docs-component-link href="/components/rating">Rating</a><a data-docs-component-link href="/components/skeleton">Skeleton</a><a data-docs-component-link href="/components/spinner">Spinner</a><a data-docs-component-link href="/components/styled-icon">Styled Icon</a><a data-docs-component-link href="/components/timeline">Timeline</a><a data-docs-component-link href="/components/tree-view">Tree View</a></div> <div><a data-docs-component-link href="/components/accordion">Accordion</a><a data-docs-component-link href="/components/alert">Alert</a><a data-docs-component-link href="/components/avatar">Avatar</a><a data-docs-component-link href="/components/avatar-group">Avatar Group</a><a data-docs-component-link href="/components/badge">Badge</a><a data-docs-component-link href="/components/blockquote">Blockquote</a><a data-docs-component-link href="/components/button">Button</a><a data-docs-component-link href="/components/button-group">Button Group</a><a data-docs-component-link href="/components/card">Card</a><a data-docs-component-link href="/components/carousel">Carousel</a><a data-docs-component-link href="/components/chat-bubble">Chat Bubble</a><a data-docs-component-link href="/components/collapse">Collapse</a><a data-docs-component-link href="/components/date-picker">Date Picker</a><a data-docs-component-link href="/components/device-frame">Device Frame</a><a data-docs-component-link href="/components/file-upload-progress">File Upload Progress</a><a data-docs-component-link href="/components/legend-indicator">Legend Indicator</a><a data-docs-component-link href="/components/list">List</a><a data-docs-component-link href="/components/list-group">List Group</a><a data-docs-component-link href="/components/marquee">Marquee</a><a data-docs-component-link href="/components/progress">Progress</a><a data-docs-component-link href="/components/rating">Rating</a><a data-docs-component-link href="/components/skeleton">Skeleton</a><a data-docs-component-link href="/components/spinner">Spinner</a><a data-docs-component-link href="/components/styled-icon">Styled Icon</a><a data-docs-component-link href="/components/timeline">Timeline</a><a data-docs-component-link href="/components/tree-view">Tree View</a></div>
</section> </section>
<section class="docs-directory-group"> <section class="docs-directory-group">
<a class="docs-directory-heading" href="/core">Core</a> <a class="docs-directory-heading" href="/core">Core</a>
<div><a data-docs-component-link href="/components/auth-form">Auth Form</a><a data-docs-component-link href="/components/auth-split-layout">Auth Split Layout</a><a data-docs-component-link href="/components/portal-dashboard">Portal Dashboard</a><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div> <div><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div>
</section> </section>
<section class="docs-directory-group"> <section class="docs-directory-group">
<a class="docs-directory-heading" href="/data">Data</a> <a class="docs-directory-heading" href="/data">Data</a>
<div><a data-docs-component-link href="/components/metric-card">Metric Card</a><a data-docs-component-link href="/components/metric-grid">Metric Grid</a><a data-docs-component-link href="/components/stats-bar">Stats Bar</a></div> <div><a data-docs-component-link href="/components/metric-card">Metric Card</a></div>
</section> </section>
<section class="docs-directory-group"> <section class="docs-directory-group">
<a class="docs-directory-heading" href="/forms">Forms</a> <a class="docs-directory-heading" href="/forms">Forms</a>
@@ -55,11 +50,11 @@ layout Showcase {
</section> </section>
<section class="docs-directory-group"> <section class="docs-directory-group">
<a class="docs-directory-heading" href="/layout">Layout</a> <a class="docs-directory-heading" href="/layout">Layout</a>
<div><a data-docs-component-link href="/components/columns">Columns</a><a data-docs-component-link href="/components/container">Container</a><a data-docs-component-link href="/components/custom-scrollbar">Custom Scrollbar</a><a data-docs-component-link href="/components/divider">Divider</a><a data-docs-component-link href="/components/feature-grid">Feature Grid</a><a data-docs-component-link href="/components/footer">Footer</a><a data-docs-component-link href="/components/grid">Grid</a><a data-docs-component-link href="/components/image">Image</a><a data-docs-component-link href="/components/kbd">Kbd</a><a data-docs-component-link href="/components/layout-splitter">Layout Splitter</a><a data-docs-component-link href="/components/link">Link</a><a data-docs-component-link href="/components/public-page-shell">Public Page Shell</a><a data-docs-component-link href="/components/section">Section</a><a data-docs-component-link href="/components/section-header">Section Header</a><a data-docs-component-link href="/components/typography">Typography</a></div> <div><a data-docs-component-link href="/components/columns">Columns</a><a data-docs-component-link href="/components/container">Container</a><a data-docs-component-link href="/components/custom-scrollbar">Custom Scrollbar</a><a data-docs-component-link href="/components/divider">Divider</a><a data-docs-component-link href="/components/grid">Grid</a><a data-docs-component-link href="/components/image">Image</a><a data-docs-component-link href="/components/kbd">Kbd</a><a data-docs-component-link href="/components/layout-splitter">Layout Splitter</a><a data-docs-component-link href="/components/link">Link</a><a data-docs-component-link href="/components/section">Section</a><a data-docs-component-link href="/components/typography">Typography</a></div>
</section> </section>
<section class="docs-directory-group"> <section class="docs-directory-group">
<a class="docs-directory-heading" href="/marketing">Marketing</a> <a class="docs-directory-heading" href="/marketing">Marketing</a>
<div><a data-docs-component-link href="/components/announcement-bar">Announcement Bar</a><a data-docs-component-link href="/components/ctasection">CTASection</a><a data-docs-component-link href="/components/feature-card">Feature Card</a><a data-docs-component-link href="/components/feature-icon-card">Feature Icon Card</a><a data-docs-component-link href="/components/hero">Hero</a><a data-docs-component-link href="/components/hero-actions">Hero Actions</a><a data-docs-component-link href="/components/marketing-section-header">Marketing Section Header</a><a data-docs-component-link href="/components/page-header">Page Header</a><a data-docs-component-link href="/components/split-hero">Split Hero</a><a data-docs-component-link href="/components/text-link">Text Link</a></div> <div><a data-docs-component-link href="/components/text-link">Text Link</a></div>
</section> </section>
<section class="docs-directory-group"> <section class="docs-directory-group">
<a class="docs-directory-heading" href="/navigation">Navigation</a> <a class="docs-directory-heading" href="/navigation">Navigation</a>
@@ -72,9 +67,13 @@ layout Showcase {
<section class="docs-directory-group"> <section class="docs-directory-group">
<a class="docs-directory-heading" href="/tables">Tables</a> <a class="docs-directory-heading" href="/tables">Tables</a>
<div><a data-docs-component-link href="/components/data-table">Data Table</a></div> <div><a data-docs-component-link href="/components/data-table">Data Table</a></div>
</section>
<section class="docs-directory-group">
<a class="docs-directory-heading" href="/advanced-forms">Advanced Forms</a>
<div><a data-docs-component-link href="/components/advanced-select">Advanced Select</a><a data-docs-component-link href="/components/combo-box">Combo Box</a><a data-docs-component-link href="/components/input-number">Input Number</a><a data-docs-component-link href="/components/pin-input">Pin Input</a><a data-docs-component-link href="/components/strong-password">Strong Password</a><a data-docs-component-link href="/components/toggle-count">Toggle Count</a><a data-docs-component-link href="/components/toggle-password">Toggle Password</a></div>
</section> </section>
</nav> </nav>
<p class="docs-directory-empty" data-docs-empty>No components found.</p> <p class="docs-directory-empty" data-docs-empty hidden>No components found.</p>
</aside> </aside>
<main class="showcase-main"><slot /></main> <main class="showcase-main"><slot /></main>
</div> </div>
app/pages/accessibility.wrn
+4 -7
View File
@@ -8,13 +8,10 @@ page AccessibilityGuide {
<article class="page-docs guide-page"> <article class="page-docs guide-page">
<nav class="docs-breadcrumbs" aria-label="Breadcrumb"><a href="/docs">Docs</a><span aria-hidden="true">/</span><span>Accessibility</span></nav> <nav class="docs-breadcrumbs" aria-label="Breadcrumb"><a href="/docs">Docs</a><span aria-hidden="true">/</span><span>Accessibility</span></nav>
<header class="docs-intro"><span class="showcase-eyebrow">Getting Started</span><h1>Accessibility</h1><p>Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.</p></header> <header class="docs-intro"><span class="showcase-eyebrow">Getting Started</span><h1>Accessibility</h1><p>Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.</p></header>
<section class="guide-section guide-example"><h2>Configure and use it</h2><p>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.</p><pre><code>bunx wrnexus test accessibility . <section class="guide-section"><h2>Overview</h2><p>Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
bunx wrnexus security headers .</code></pre><h3>What changes after this</h3><p>Keyboard, focus, naming, contrast, zoom, and reduced-motion behavior become explicit acceptance criteria.</p></section> <section class="guide-section"><h2>Label controls and explain errors</h2><p>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.</p><pre><code>&lt;Input label="Email address" type="email" name="email" required="true" helperText="Use your work email." error="Enter a valid email address." /&gt;
<section class="guide-section"><h2>Keyboard first</h2><p>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.</p></section><section class="guide-section"><h2>Names and descriptions</h2><p>Provide visible labels or accessible names for icon-only actions. Associate help and validation messages with their fields rather than relying on color alone.</p></section><section class="guide-section"><h2>Focus and overlays</h2><p>Keep visible focus rings. Modal, drawer, dropdown, and popover components manage focus and dismissal; test Escape, Tab, Shift+Tab, and focus restoration.</p></section><section class="guide-section"><h2>Motion and contrast</h2><p>Theme tokens preserve semantic contrast, while components honor reduced motion. Verify custom colors in light and dark modes at 200% zoom.</p></section> &lt;Button label="Save changes" disabled="true" /&gt;</code></pre><h3>Verify the result</h3><p>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.</p></section>
<section class="guide-section"><h2>Verify the result</h2><p>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.</p><pre><code>bunx wrnexus typecheck .
bunx wrnexus inspect packages .
bunx wrnexus inspect styles .
bunx wrnexus build .</code></pre><h3>Expected result</h3><p>The commands exit successfully, the build reports the installed UI components and active theme, and the rendered page remains usable before and after hydration.</p></section>
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav> <nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
</article> </article>
} }
app/pages/advanced-forms.wrn
+3 -3
View File
@@ -60,13 +60,13 @@ page AdvancedFormsShowcase {
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Advanced Forms</span><h2>Strong Password</h2><p>Theme-aware, responsive strong password component.</p></div> <div><span class="catalog-card-category">Advanced Forms</span><h2>Strong Password</h2><p>Theme-aware, responsive strong password component.</p></div>
<div class="catalog-card-footer"><span>27 props · 0 slots</span><a href="/components/strong-password">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>29 props · 0 slots</span><a href="/components/strong-password">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="sample-1" firstLabel="Toggle Count" secondLabel="Toggle Count" ariaLabel="Toggle Count 1 example" items='[{"id":"toggle-count-0-1","key":"toggle-count-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":"#toggle-count-demo","actionHref":"#toggle-count-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":"toggle-count-0-2","key":"toggle-count-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#toggle-count-demo","actionHref":"#toggle-count-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"]}]' align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div> <div class="catalog-card-stage"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 1 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Count</h2><p>Theme-aware, responsive toggle count component.</p></div> <div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Count</h2><p>Theme-aware, responsive toggle count component.</p></div>
@@ -80,7 +80,7 @@ page AdvancedFormsShowcase {
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Password</h2><p>Accessible password field with optional show and hide controls.</p></div> <div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Password</h2><p>Accessible password field with optional show and hide controls.</p></div>
<div class="catalog-card-footer"><span>24 props · 0 slots</span><a href="/components/toggle-password">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>27 props · 0 slots</span><a href="/components/toggle-password">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article></div> </article></div>
} }
app/pages/base.wrn
+28 -28
View File
@@ -10,13 +10,13 @@ page BaseShowcase {
<span class="showcase-eyebrow">Component category</span> <span class="showcase-eyebrow">Component category</span>
<h1 class="showcase-title">Base</h1> <h1 class="showcase-title">Base</h1>
<p class="showcase-description">26 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p> <p class="showcase-description">26 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
<div class="category-meta"><span>26 components</span><span>Multiple use cases</span><span>83 live configurations</span></div> <div class="category-meta"><span>26 components</span><span>Multiple use cases</span><span>85 live configurations</span></div>
</header> </header>
<div class="catalog-grid"> <div class="catalog-grid">
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Accordion size="default" variant="default" class="showcase-instance showcase-instance--1" 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"]}]' multiple="false" alwaysOpen="false" disabled="false" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div> <div class="catalog-card-stage"><Accordion size="default" variant="default" class="showcase-instance showcase-instance--1" 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."}]' defaultOpen='["workspace"]' multiple="false" alwaysOpen="false" disabled="false" indicator="chevron" indicatorPosition="end" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p></div>
@@ -26,7 +26,7 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Alert size="default" variant="soft" class="showcase-instance showcase-instance--1" 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" icon="" dismissible="true" dismissLabel="Alert" linkLabel="Alert" linkHref="#alert-demo" actionLabel="Alert" actionHref="#alert-demo" compact="false" /></div> <div class="catalog-card-stage"><Alert size="default" color="success" variant="soft" class="" radius="md" shadow="none" title="Changes saved" description="Your workspace settings are up to date." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--circle-check]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p></div>
@@ -36,7 +36,7 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Avatar size="md" variant="solid" statusLabel="Avatar" badgeLabel="Avatar" description="A polished default avatar for a modern application." class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p></div>
@@ -46,7 +46,7 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><AvatarGroup items='[{"id":"avatar-group-0-1","key":"avatar-group-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":"#avatar-group-demo","actionHref":"#avatar-group-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":"avatar-group-0-2","key":"avatar-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-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"]}]' size="md" variant="solid" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Avatar Group" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Avatar Group</h2><p>Theme-aware, responsive avatar group component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Avatar Group</h2><p>Theme-aware, responsive avatar group component.</p></div>
@@ -56,11 +56,11 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Badge label="Badge" size="md" variant="solid" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Badge" animated="false" dismissible="true" dismissLabel="Badge" truncate="false" anchorLabel="Badge" /></div> <div class="catalog-card-stage"><Badge label="Active" humanize="true" size="sm" color="success" variant="soft" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p></div>
<div class="catalog-card-footer"><span>22 props · 0 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
@@ -70,7 +70,7 @@ page BaseShowcase {
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p></div>
<div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>14 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
@@ -80,13 +80,13 @@ page BaseShowcase {
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p></div>
<div class="catalog-card-footer"><span>25 props · 1 slots</span><a href="/components/button">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>26 props · 1 slots</span><a href="/components/button">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><ButtonGroup items='[{"id":"button-group-0-1","key":"button-group-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":"#button-group-demo","actionHref":"#button-group-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":"button-group-0-2","key":"button-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-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"]}]' value="sample-1" size="md" variant="default" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 1 example" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Button Group</h2><p>Theme-aware, responsive button group component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Button Group</h2><p>Theme-aware, responsive button group component.</p></div>
@@ -96,27 +96,27 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Card title="Citizen service" subtitle="Card example" description="Access a trusted online service." actionLabel="Card" actionHref="#card-demo" headerActions='[{"id":"card-0-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-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"]}]' navigation='[{"id":"card-0-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-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"]}]' mobileNavigation="false" alertTitle="Card example" alertDescription="A polished default card for a modern application." empty="false" emptyTitle="Card example" items='[{"id":"card-0-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable messagLine truncated <div class="catalog-card-stage"><Card title="Citizen service" icon="" titleKey="" subtitle="" subtitleKey="" description="Access a trusted online service." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Group related content in a responsive themed surface with title, description, content, and supporting slots.</p></div> <div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Group related content in a responsive themed surface with title, description, content, and supporting slots.</p></div>
<div class="catalog-card-footer"><span>31 props · 1 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>41 props · 3 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Carousel size="default" title="Carousel example" description="A polished default carousel for a modern application." items='[{"id":"carousel-0-1","key":"carousel-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":"#carousel-demo","actionHref":"#carousel-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":"carousel-0-2","key":"carousel-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-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"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p></div>
<div class="catalog-card-footer"><span>22 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>23 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><ChatBubble size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items='[{"id":"chat-bubble-0-1","key":"chat-bubble-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":"#chat-bubble-demo","actionHref":"#chat-bubble-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":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-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"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
@@ -136,7 +136,7 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><DatePicker size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><DatePicker size="default" label="Start date" name="start-date" value="2026-09-20" placeholder="Enter a sample value" type="date" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Date Picker</h2><p>Theme-aware, responsive date picker component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Date Picker</h2><p>Theme-aware, responsive date picker component.</p></div>
@@ -156,17 +156,17 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><FileUploadProgress size="default" label="File Upload Progress" value="36" max="100" showValue="true" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="2.4 MB" status="uploading" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>File Upload Progress</h2><p>Theme-aware, responsive file upload progress component.</p></div> <div><span class="catalog-card-category">Base</span><h2>File Upload Progress</h2><p>Theme-aware, responsive file upload progress component.</p></div>
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>14 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><LegendIndicator size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items='[{"id":"legend-indicator-0-1","key":"legend-indicator-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":"#legend-indicator-demo","actionHref":"#legend-indicator-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":"legend-indicator-0-2","key":"legend-indicator-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><LegendIndicator size="default" title="Traffic sources" description="Select a source to toggle its visibility." items='[{"label":"Direct","color":"#8b5cf6","value":"42%"},{"label":"Search","color":"#14b8a6","value":"35%"},{"label":"Referral","color":"#f59e0b","value":"23%"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Legend Indicator</h2><p>Theme-aware, responsive legend indicator component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Legend Indicator</h2><p>Theme-aware, responsive legend indicator component.</p></div>
@@ -186,11 +186,11 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><ListGroup size="default" title="List Group example" description="A polished default list group for a modern application." items='[{"id":"list-group-0-1","key":"list-group-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":"#list-group-demo","actionHref":"#list-group-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":"list-group-0-2","key":"list-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>List Group</h2><p>Theme-aware, responsive list group component.</p></div> <div><span class="catalog-card-category">Base</span><h2>List Group</h2><p>Theme-aware, responsive list group component.</p></div>
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/list-group">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/list-group">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
@@ -216,11 +216,11 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Rating size="default" title="Rating example" description="A polished default rating for a modern application." items='[{"id":"rating-0-1","key":"rating-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":"#rating-demo","actionHref":"#rating-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":"rating-0-2","key":"rating-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><Rating size="default" color="primary" title="Rate your experience" description="" items='[]' variant="default" value="3" max="5" step="1" readonly="false" disabled="false" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p></div>
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/rating">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>12 props · 1 slots</span><a href="/components/rating">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
@@ -246,27 +246,27 @@ page BaseShowcase {
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><StyledIcon size="default" title="Styled Icon example" description="A polished default styled icon for a modern application." items='[{"id":"styled-icon-0-1","key":"styled-icon-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":"#styled-icon-demo","actionHref":"#styled-icon-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":"styled-icon-0-2","key":"styled-icon-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#styled-icon-demo","actionHref":"#styled-icon-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><StyledIcon size="default" color="primary" title="Styled Icon" description="" items='[]' variant="default" icon="icon-[lucide--sparkles]" label="Verified" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Styled Icon</h2><p>Theme-aware, responsive styled icon component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Styled Icon</h2><p>Theme-aware, responsive styled icon component.</p></div>
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/styled-icon">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>9 props · 0 slots</span><a href="/components/styled-icon">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" numbered="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Timeline</h2><p>Present responsive chronological activity, milestones, or workflow status with rich item metadata.</p></div> <div><span class="catalog-card-category">Base</span><h2>Timeline</h2><p>Present responsive chronological activity, milestones, or workflow status with rich item metadata.</p></div>
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/timeline">Explore component <span aria-hidden="true">→</span></a></div> <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/timeline">Explore component <span aria-hidden="true">→</span></a></div>
</div> </div>
</article> </article>
<article class="catalog-card" data-interactive-preview="false"> <article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview"> <div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div> <div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><TreeView title="Tree View example" description="A polished default tree view for a modern application." items='[{"id":"tree-view-0-1","key":"tree-view-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":"#tree-view-demo","actionHref":"#tree-view-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":"tree-view-0-2","key":"tree-view-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#tree-view-demo","actionHref":"#tree-view-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"]}]' defaultExpanded='[{"id":"tree-view-0-1","key":"tree-view-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":"#tree-view-demo","actionHref":"#tree-view-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":"tree-view-0-2","key":"tree-view-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#tree-view-demo","actionHref":"#tree-view-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"]}]' size="default" class="showcase-instance showcase-instance--1" /></div> <div class="catalog-card-stage"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
</div> </div>
<div class="catalog-card-body"> <div class="catalog-card-body">
<div><span class="catalog-card-category">Base</span><h2>Tree View</h2><p>Theme-aware, responsive tree view component.</p></div> <div><span class="catalog-card-category">Base</span><h2>Tree View</h2><p>Theme-aware, responsive tree view component.</p></div>
app/pages/block-library.wrn
+3 -9
View File
@@ -1,11 +1,5 @@
page BlockLibrary { page BlockLibrary {
layout = "showcase" layout = "gallery"
seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." } seo { title = "UI blocks" }
view { view { <header class="docs-intro"><span class="showcase-eyebrow">Composed sections</span><h1>Ready-to-use blocks</h1><p>Real sections with live previews and complete source code.</p></header><div class="example-catalog"><a class="example-card" href="/blocks/announcement-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Announcement Bar</h2><p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/ctasection"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>CTASection</h2><p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Card</h2><p>Present one linked feature or service with media, icon, badge, description, and action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-icon-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Icon Card</h2><p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/footer"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero</h2><p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero-actions"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero Actions</h2><p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/marketing-section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Marketing Section Header</h2><p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/metric-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/page-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Page Header</h2><p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/split-hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Split Hero</h2><p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/stats-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p><strong>Open example →</strong></diLine truncated
<div class="page-marketplace page-blocks">
<nav class="market-tabs"><a href="#all">All blocks</a><a href="#marketing">Marketing</a><a href="#application">Application UI</a><a href="#ecommerce">Ecommerce</a><a href="#blog">Blog & Articles</a></nav>
<header><span class="showcase-eyebrow">Composable sections</span><h1>Ready-to-use UI blocks</h1><p>Complete responsive sections composed exclusively from the components in this library.</p></header>
<div class="market-grid"><article class="market-card"><div class="market-preview market-preview--1"><span class="icon-[lucide--layout-template] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Hero sections</h2><p>Hero, actions, product proof, and visual stage.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--2"><span class="icon-[lucide--grid-2x2] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Feature grids</h2><p>Responsive benefits and product capability sections.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--3"><span class="icon-[lucide--badge-dollar-sign] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Marketing</small><h2>Pricing sections</h2><p>Tier cards, comparison grids, and CTAs.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--4"><span class="icon-[lucide--panel-left] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Application shells</h2><p>Headers, sidebars, content, and command areas.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--1"><span class="icon-[lucide--chart-no-axes-combined] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Dashboard stats</h2><p>Metrics, trends, filters, and summaries.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--2"><span class="icon-[lucide--shopping-cart] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Ecommerce</small><h2>Checkout panels</h2><p>Cart, address, payment, and order summary.</p><a href="/components/grid">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--3"><span class="icon-[lucide--newspaper] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Blog & Articles</small><h2>Article layouts</h2><p>Editorial headers, content, author, and sharing.</p><a href="/components/container">View components →</a></div></article><article class="market-card"><div class="market-preview market-preview--4"><span class="icon-[lucide--shield-check] size-10"></span><div><i></i><i></i><i></i></div></div><div><small>Application UI</small><h2>Authentication</h2><p>Sign in, registration, recovery, and verification.</p><a href="/components/grid">View components →</a></div></article></div>
</div>
}
} }
app/pages/blocks/announcement-bar.wrn
+10
View File
@@ -0,0 +1,10 @@
page AnnouncementBarBlock {
layout = "gallery"
seo { title = "Announcement Bar block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Announcement Bar</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page AnnouncementBarExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/ctasection.wrn
+20
View File
@@ -0,0 +1,20 @@
page CTASectionBlock {
layout = "gallery"
seo { title = "CTASection block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>CTASection</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page CTASectionExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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='[<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>]' maxWidth="full" fullBleed="false" class="showcase-instance showcase-instance--1"&gt;&lt;div data-slot="visual"&gt;
&lt;div class="showcase-visual-panel"&gt;
&lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
&lt;strong&gt;Composable visual panel&lt;/strong&gt;
&lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/CTASection&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/feature-card.wrn
+10
View File
@@ -0,0 +1,10 @@
page FeatureCardBlock {
layout = "gallery"
seo { title = "Feature Card block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Card</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureCardExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/feature-grid.wrn
+10
View File
@@ -0,0 +1,10 @@
page FeatureGridBlock {
layout = "gallery"
seo { title = "Feature Grid block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Grid</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureGridExample <span>&#123;</span>
view <span>&#123;</span>
&lt;FeatureGrid size="default" items='[<span>&#123;</span>"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"<span>&#125;</span>,<span>&#123;</span>"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"<span>&#125;</span>,<span>&#123;</span>"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"<span>&#125;</span>]' 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" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/feature-icon-card.wrn
+10
View File
@@ -0,0 +1,10 @@
page FeatureIconCardBlock {
layout = "gallery"
seo { title = "Feature Icon Card block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Icon Card</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureIconCardExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/footer.wrn
+10
View File
@@ -0,0 +1,10 @@
page FooterBlock {
layout = "gallery"
seo { title = "Footer block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Footer</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FooterExample <span>&#123;</span>
view <span>&#123;</span>
&lt;Footer size="default" label="Footer" items='[<span>&#123;</span>"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[<span>&#123;</span>"label":"Components","href":"/base"<span>&#125;</span>,<span>&#123;</span>"label":"Themes","href":"/themes"<span>&#125;</span>,<span>&#123;</span>"label":"Examples","href":"/blocks"<span>&#125;</span>]<span>&#125;</span>,<span>&#123;</span>"type":"header","label":"Developers","items":[<span>&#123;</span>"label":"Documentation","href":"/docs"<span>&#125;</span>,<span>&#123;</span>"label":"Installation","href":"/installation"<span>&#125;</span>,<span>&#123;</span>"label":"Framework guides","href":"/framework-guides"<span>&#125;</span>]<span>&#125;</span>,<span>&#123;</span>"type":"header","label":"Resources","items":[<span>&#123;</span>"label":"Accessibility","href":"/accessibility"<span>&#125;</span>,<span>&#123;</span>"label":"Design tokens","href":"/colors"<span>&#125;</span>,<span>&#123;</span>"label":"Typography","href":"/fonts"<span>&#125;</span>]<span>&#125;</span>,<span>&#123;</span>"type":"header","label":"Company","items":[<span>&#123;</span>"label":"WorkRoot","href":"https://workroot.in","external":true<span>&#125;</span>,<span>&#123;</span>"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true<span>&#125;</span>]<span>&#125;</span>]' columns="4" maxWidth="wide" mobileColumns="2" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/hero-actions.wrn
+10
View File
@@ -0,0 +1,10 @@
page HeroActionsBlock {
layout = "gallery"
seo { title = "Hero Actions block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Hero Actions</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page HeroActionsExample <span>&#123;</span>
view <span>&#123;</span>
&lt;HeroActions actions='[<span>&#123;</span>"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"<span>&#125;</span>,<span>&#123;</span>"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"<span>&#125;</span>]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/hero.wrn
+20
View File
@@ -0,0 +1,20 @@
page HeroBlock {
layout = "gallery"
seo { title = "Hero block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Hero</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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,Line truncated
<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></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page HeroExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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='[<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>]' 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='[<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125Line truncated
&lt;div class="showcase-visual-panel"&gt;
&lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
&lt;strong&gt;Composable visual panel&lt;/strong&gt;
&lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/Hero&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/index.wrn
+5
View File
@@ -0,0 +1,5 @@
page BlocksIndex {
layout = "gallery"
seo { title = "UI blocks" }
view { <div class="example-catalog"><a class="example-card" href="/blocks/announcement-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Announcement Bar</h2><p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/ctasection"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>CTASection</h2><p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Card</h2><p>Present one linked feature or service with media, icon, badge, description, and action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-icon-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Icon Card</h2><p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/footer"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero</h2><p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero-actions"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero Actions</h2><p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/marketing-section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Marketing Section Header</h2><p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/metric-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/page-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Page Header</h2><p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/split-hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Split Hero</h2><p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/stats-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p><strong>Open example →</strong></div></a></div> }
}
app/pages/blocks/marketing-section-header.wrn
+10
View File
@@ -0,0 +1,10 @@
page MarketingSectionHeaderBlock {
layout = "gallery"
seo { title = "Marketing Section Header block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Marketing Section Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page MarketingSectionHeaderExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/metric-grid.wrn
+10
View File
@@ -0,0 +1,10 @@
page MetricGridBlock {
layout = "gallery"
seo { title = "Metric Grid block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Metric Grid</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page MetricGridExample <span>&#123;</span>
view <span>&#123;</span>
&lt;MetricGrid items='[<span>&#123;</span>"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"<span>&#125;</span>,<span>&#123;</span>"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"<span>&#125;</span>,<span>&#123;</span>"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"<span>&#125;</span>]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/page-header.wrn
+10
View File
@@ -0,0 +1,10 @@
page PageHeaderBlock {
layout = "gallery"
seo { title = "Page Header block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Page Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page PageHeaderExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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='[<span>&#123;</span>"label":"Home","href":"/","icon":"icon-[lucide--house]"<span>&#125;</span>,<span>&#123;</span>"label":"Components","href":"/base"<span>&#125;</span>,<span>&#123;</span>"label":"Page header","current":true<span>&#125;</span>]' 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" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/section-header.wrn
+10
View File
@@ -0,0 +1,10 @@
page SectionHeaderBlock {
layout = "gallery"
seo { title = "Section Header block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Section Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page SectionHeaderExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/split-hero.wrn
+20
View File
@@ -0,0 +1,20 @@
page SplitHeroBlock {
layout = "gallery"
seo { title = "Split Hero block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Split Hero</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page SplitHeroExample <span>&#123;</span>
view <span>&#123;</span>
&lt;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='[<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>]' trustItems='[<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#125;</span>,<span>&#123;</span>"label":"API reference","href":"#api-reference"<span>&#125;</span>],"values":["Included","Standard"]<span>&#125;</span>,<span>&#123;</span>"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":[<span>&#123;</span>"label":"Nested option A","value":"nested-a"<span>&#125;</span>,<span>&#123;</span>"label":"Nested option B","value":"nested-b"<span>&#125;</span>],"links":[<span>&#123;</span>"label":"Documentation","href":"#documentation"<span>&#1Line truncated
&lt;div class="showcase-visual-panel"&gt;
&lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
&lt;strong&gt;Composable visual panel&lt;/strong&gt;
&lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/SplitHero&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/blocks/stats-bar.wrn
+10
View File
@@ -0,0 +1,10 @@
page StatsBarBlock {
layout = "gallery"
seo { title = "Stats Bar block" }
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Stats Bar</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page StatsBarExample <span>&#123;</span>
view <span>&#123;</span>
&lt;StatsBar items='[<span>&#123;</span>"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"<span>&#125;</span>,<span>&#123;</span>"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"<span>&#125;</span>,<span>&#123;</span>"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"<span>&#125;</span>,<span>&#123;</span>"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"<span>&#125;</span>]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" mobileColumns="1" class="showcase-instance showcase-instance--1" /&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre></section> }
}
app/pages/colors.wrn
+5 -7
View File
@@ -8,13 +8,11 @@ page ColorsGuide {
<article class="page-docs guide-page"> <article class="page-docs guide-page">
<nav class="docs-breadcrumbs" aria-label="Breadcrumb"><a href="/docs">Docs</a><span aria-hidden="true">/</span><span>Colors</span></nav> <nav class="docs-breadcrumbs" aria-label="Breadcrumb"><a href="/docs">Docs</a><span aria-hidden="true">/</span><span>Colors</span></nav>
<header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Colors</h1><p>Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.</p></header> <header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Colors</h1><p>Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.</p></header>
<section class="guide-section guide-example"><h2>Configure and use it</h2><p>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.</p><pre><code>&lt;Button color="primary"&gt;Save&lt;/Button&gt; <section class="guide-section"><h2>Brand colors</h2><p>Primary and secondary tokens communicate brand hierarchy.</p></section><section class="guide-section"><h2>Status colors</h2><p>Success, warning, danger, and info preserve their semantic meaning in every palette.</p></section><section class="guide-section"><h2>Component override</h2><p>Pass color="success" or another semantic color to any component.</p></section>
&lt;Alert color="danger"&gt;Unable to save&lt;/Alert&gt;</code></pre><h3>What changes after this</h3><p>Status and hierarchy use named semantic roles that remain understandable in both light and dark modes.</p></section> <section class="guide-section"><h2>Choose color by meaning</h2><p>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.</p><pre><code>&lt;Button label="Save" color="primary" /&gt;
<section class="guide-section"><h2>Semantic roles</h2><p>Primary and secondary communicate hierarchy; success, warning, danger, and info communicate state. Use roles consistently instead of choosing colors by appearance.</p></section><section class="guide-section"><h2>Component colors</h2><p>Every maintained component accepts the shared color contract. Prefer the color prop for supported variants and tokens for application-owned surfaces.</p></section><section class="guide-section"><h2>Accessible combinations</h2><p>Check text, icons, borders, hover, focus, selected, and disabled states. Never make color the only carrier of meaning.</p></section><section class="guide-section"><h2>Brand overrides</h2><p>Define brand values once through theme tokens. Derived surfaces and on-colors keep contrast coherent across light and dark modes.</p></section> &lt;Button label="Delete record" color="danger" /&gt;
<section class="guide-section"><h2>Verify the result</h2><p>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.</p><pre><code>bunx wrnexus typecheck . &lt;Badge label="Active" color="success" /&gt;</code></pre><h3>Verify the result</h3><p>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.</p></section>
bunx wrnexus inspect packages .
bunx wrnexus inspect styles .
bunx wrnexus build .</code></pre><h3>Expected result</h3><p>The commands exit successfully, the build reports the installed UI components and active theme, and the rendered page remains usable before and after hydration.</p></section>
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav> <nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
</article> </article>
} }
app/pages/components/accordion.wrn
+156 -1102
View File
File diff suppressed because it is too large. Load diff
app/pages/components/advanced-select.wrn
+2182 -1888
View File
File diff suppressed because it is too large. Load diff
app/pages/components/alert.wrn
+96 -1156
View File
File diff suppressed because it is too large. Load diff
app/pages/components/announcement-bar.wrn
-175
View File
@@ -1,175 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page AnnouncementBarDetail {
layout = "showcase"
state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? ""
state playground_message = ctx.url.searchParams.get("pg_message") ?? "Announcement"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default announcement bar for a modern application."
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Announcement Bar"
state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#announcement-bar-demo"
state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true"
state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Announcement Bar"
state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_width = ctx.url.searchParams.get("pg_width") ?? "wide"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
state playground_role = ctx.url.searchParams.get("pg_role") ?? "status"
state playground_live = ctx.url.searchParams.get("pg_live") ?? "polite"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Announcement Bar"
description = "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Announcement Bar</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Marketing component</span>
<h1>Announcement Bar</h1>
<p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p>
<div class="detail-badges"><span>19 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="AnnouncementBar" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="dismiss">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Announcement Bar</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><AnnouncementBar badge='{playground_badge}' badgeIcon='{playground_badgeIcon}' message='{playground_message}' description='{playground_description}' icon='{playground_icon}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' actionIcon='{playground_actionIcon}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' sticky='{playground_sticky}' compact='{playground_compact}' size='{playground_size}' width='{playground_width}' color='{playground_color}' variant='{playground_variant}' role='{playground_role}' live='{playground_live}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;AnnouncementBar
description="A polished default announcement bar for a modern application."
actionLabel="Announcement Bar"
actionHref="#announcement-bar-demo"
dismissible="true"
dismissLabel="Announcement Bar"
/&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-announcement-bar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-announcement-bar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-announcement-bar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-message"><span><strong>message</strong><small>string</small></span><input id="playground-announcement-bar-message" name="pg_message" type="text" value="Announcement" /></label><label class="playground-field" for="playground-announcement-bar-description"><span><strong>description</strong><small>string</small></span><input id="playground-announcement-bar-description" name="pg_description" type="text" value="A polished default announcement bar for a modern application." /></label><label class="playground-field" for="playground-announcement-bar-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-announcement-bar-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-announcement-bar-actionLabel" name="pg_actionLabel" type="text" value="Announcement Bar" /></label><label class="playground-field" for="playground-announcement-bar-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-announcement-bar-actionHref" name="pg_actionHref" type="text" value="#announcement-bar-demo" /></label><label class="playground-field" for="playground-announcement-bar-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-announcement-bar-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-announcement-bar-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-announcement-bar-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-announcement-bar-dismissLabel" name="pg_dismissLabel" type="text" value="Announcement Bar" /></label><label class="playground-toggle" for="playground-announcement-bar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-announcement-bar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-announcement-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-announcement-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-announcement-bar-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-announcement-bar-width"><span><strong>width</strong><small>string</small></span><select id="playground-announcement-bar-width" name="pg_width"><option value="wide" selected>wide</option><option value="default">default</option><option value="full">full</option><option value="compact">compact</option></select></label><label class="playground-field" for="playground-announcement-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-announcement-bar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-announcement-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-announcement-bar-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="default">default</option><option value="outline">outline</optionLine truncated
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Soft product notice</h2><p>Use a calm, dismissible notice inside a constrained content area.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="announcement-bar-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Soft product notice usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AnnouncementBar
badge="Public notice"
badgeIcon="icon-[lucide--sparkles]"
message="All composite components are now available"
description="Review each component and its recommended use cases."
actionLabel="View components"
actionHref="#components"
actionIcon="icon-[lucide--arrow-down]"
dismissible="true"
dismissLabel="Announcement Bar"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Wide solid announcement</h2><p>Use stronger contrast for important platform or service announcements.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="announcement-bar-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AnnouncementBar badge="Release" message="WRNexusJS UI updates are ready" description="Explore the redesigned responsive components." icon="icon-[lucide--rocket]" actionLabel="Read changes" actionHref="#release" dismissible="true" dismissLabel="Compact example" sticky="false" compact="true" size="sm" width="wide" variant="solid" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Wide solid announcement usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AnnouncementBar
badge="Release"
message="WRNexusJS UI updates are ready"
description="Explore the redesigned responsive components."
icon="icon-[lucide--rocket]"
actionLabel="Read changes"
actionHref="#release"
dismissible="true"
dismissLabel="Compact example"
compact="true"
size="sm"
width="wide"
variant="solid"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width critical alert</h2><p>Use edge-to-edge width for time-sensitive information that applies to the complete page.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="announcement-bar-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AnnouncementBar badge="Service alert" message="Scheduled maintenance tonight" description="Some services may be temporarily unavailable from 23:00 to 23:30." icon="icon-[lucide--triangle-alert]" actionLabel="View status" actionHref="#status" dismissible="true" dismissLabel="Advanced example" sticky="false" compact="false" size="lg" width="full" color="warning" variant="solid" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Full-width critical alert usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AnnouncementBar
badge="Service alert"
message="Scheduled maintenance tonight"
description="Some services may be temporarily unavailable from 23:00 to 23:30."
icon="icon-[lucide--triangle-alert]"
actionLabel="View status"
actionHref="#status"
dismissible="true"
dismissLabel="Advanced example"
size="lg"
width="full"
color="warning"
variant="solid"
/&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dismiss</code><span>Fires after the announcement or feedback surface is dismissed.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AnnouncementBar
@dismiss='console.log(payload)'
/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"AnnouncementBar\"], [data-component=\"AnnouncementBar\"]")
if (component) registerOutputHandler(component, "dismiss", (payload) =&gt; <span>&#123;</span>
console.log("dismiss", payload)
<span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>message</code></td><td>string</td><td><code>"Announcement"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--megaphone]"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Dismiss announcement"</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>role</code></td><td>string</td><td><code>"status"</code></td><td>No</td></tr><tr><td><code>live</code></td><td>string</td><td><code>"polite"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#announcement-bar-demo-1">Soft product notice</a><a href="#announcement-bar-demo-2">Wide solid announcement</a><a href="#announcement-bar-demo-3">Full-width critical alert</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<span></span>
<a href="/components/ctasection"><small>Next</small><strong>CTASection →</strong></a>
</nav>
}
}
app/pages/components/auth-form.wrn
-169
View File
@@ -1,169 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page AuthFormDetail {
layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_mode = ctx.url.searchParams.get("pg_mode") ?? "sign-in"
state playground_action = ctx.url.searchParams.get("pg_action") ?? "#auth-form-demo"
state playground_method = ctx.url.searchParams.get("pg_method") ?? "post"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Auth Form example"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default auth form for a modern application."
state playground_returnTo = ctx.url.searchParams.get("pg_returnTo") ?? ""
state playground_schema = ctx.url.searchParams.get("pg_schema") ?? ""
state playground_showRemember = (ctx.url.searchParams.get("pg_showRemember") ?? "true") === "true"
state playground_showName = (ctx.url.searchParams.get("pg_showName") ?? "true") === "true"
state playground_submitLabel = ctx.url.searchParams.get("pg_submitLabel") ?? "Auth Form"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Auth Form"
description = "Reusable auth form component."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Auth Form</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Core component</span>
<h1>Auth Form</h1>
<p>Reusable auth form component.</p>
<div class="detail-badges"><span>13 props</span><span>1 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="AuthForm" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="submit,change,input,focus,blur">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Auth Form</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><AuthForm size='{playground_size}' color='{playground_color}' mode='{playground_mode}' action='{playground_action}' method='{playground_method}' title='{playground_title}' description='{playground_description}' returnTo='{playground_returnTo}' schema='{playground_schema}' showRemember='{playground_showRemember}' showName='{playground_showName}' submitLabel='{playground_submitLabel}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;AuthForm
action="#auth-form-demo"
title="Auth Form example"
description="A polished default auth form for a modern application."
submitLabel="Auth Form"
/&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-auth-form-size"><span><strong>size</strong><small>string</small></span><select id="playground-auth-form-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-auth-form-color"><span><strong>color</strong><small>string</small></span><select id="playground-auth-form-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-auth-form-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-auth-form-mode" name="pg_mode" type="text" value="sign-in" /></label><label class="playground-field" for="playground-auth-form-action"><span><strong>action</strong><small>string</small></span><input id="playground-auth-form-action" name="pg_action" type="text" value="#auth-form-demo" /></label><label class="playground-field" for="playground-auth-form-method"><span><strong>method</strong><small>string</small></span><select id="playground-auth-form-method" name="pg_method"><option value="post" selected>post</option><option value="get">get</option></select></label><label class="playground-field" for="playground-auth-form-title"><span><strong>title</strong><small>string</small></span><input id="playground-auth-form-title" name="pg_title" type="text" value="Auth Form example" /></label><label class="playground-field" for="playground-auth-form-description"><span><strong>description</strong><small>string</small></span><input id="playground-auth-form-description" name="pg_description" type="text" value="A polished default auth form for a modern application." /></label><label class="playground-field" for="playground-auth-form-returnTo"><span><strong>return To</strong><small>string</small></span><input id="playground-auth-form-returnTo" name="pg_returnTo" type="text" value="" /></label><label class="playground-field" for="playground-auth-form-schema"><span><strong>schema</strong><small>string</small></span><input id="playground-auth-form-schema" name="pg_schema" type="text" value="" /></label><label class="playground-toggle" for="playground-auth-form-showRemember"><span><strong>show Remember</strong><small>boolean</small></span><input id="playground-auth-form-showRemember" name="pg_showRemember" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-auth-form-showName"><span><strong>show Name</strong><small>boolean</small></span><input id="playground-auth-form-showName" name="pg_showName" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-auth-form-submitLabel"><span><strong>submit Label</strong><small>string</small></span><input id="playground-auth-form-submitLabel" name="pg_submitLabel" type="text" value="Auth Form" /></label><label class="playground-field" for="playground-auth-form-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-form-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="auth-form-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AuthForm size="default" action="#auth-form-demo" title="Auth Form example" description="A polished default auth form for a modern application." showRemember="true" showName="true" submitLabel="Auth Form" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AuthForm
action="#auth-form-demo"
title="Auth Form example"
description="A polished default auth form for a modern application."
submitLabel="Auth Form"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="auth-form-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AuthForm size="sm" action="#auth-form-demo" title="Compact Auth Form" description="A compact configuration for dashboards and dense product surfaces." showRemember="true" showName="true" submitLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AuthForm
size="sm"
action="#auth-form-demo"
title="Compact Auth Form"
description="A compact configuration for dashboards and dense product surfaces."
submitLabel="Compact example"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="auth-form-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AuthForm size="lg" action="#auth-form-demo" title="Advanced Auth Form" description="A richer configuration demonstrating additional content and hierarchy." showRemember="true" showName="true" submitLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AuthForm
size="lg"
action="#auth-form-demo"
title="Advanced Auth Form"
description="A richer configuration demonstrating additional content and hierarchy."
submitLabel="Advanced example"
/&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@submit</code><span>Fires when the component emits the submit event.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@focus</code><span>Fires when the interactive control receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the interactive control.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AuthForm
@submit='console.log(payload)'
@change='console.log(payload)'
@input='console.log(payload)'
@focus='console.log(payload)'
@blur='console.log(payload)'
/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"AuthForm\"], [data-component=\"AuthForm\"]")
if (component) registerOutputHandler(component, "submit", (payload) =&gt; <span>&#123;</span>
console.log("submit", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
console.log("change", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "input", (payload) =&gt; <span>&#123;</span>
console.log("input", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "focus", (payload) =&gt; <span>&#123;</span>
console.log("focus", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#123;</span>
console.log("blur", payload)
<span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>mode</code></td><td>string</td><td><code>"sign-in"</code></td><td>No</td></tr><tr><td><code>action</code></td><td>string</td><td><code>"/api/auth/login"</code></td><td>No</td></tr><tr><td><code>method</code></td><td>string</td><td><code>"post"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Sign in"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>returnTo</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>schema</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showRemember</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showName</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>submitLabel</code></td><td>string</td><td><code>"Continue"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#auth-form-demo-1">Production default</a><a href="#auth-form-demo-2">Compact application</a><a href="#auth-form-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<span></span>
<a href="/components/auth-split-layout"><small>Next</small><strong>Auth Split Layout →</strong></a>
</nav>
}
}
app/pages/components/auth-split-layout.wrn
-281
View File
@@ -1,281 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page AuthSplitLayoutDetail {
layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? "Secure identity"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Auth Split Layout example"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default auth split layout for a modern application."
state playground_brand = ctx.url.searchParams.get("pg_brand") ?? "Police Management System"
state playground_features = JSON.parse(ctx.url.searchParams.get("pg_features") ?? "[{\"label\":\"Team members\",\"values\":[\"5\",\"Unlimited\",\"Unlimited\"]},{\"label\":\"Support\",\"values\":[\"Email\",\"Priority\",\"Dedicated\"]},{\"label\":\"Audit history\",\"values\":[\"7 days\",\"90 days\",\"Custom\"]}]")
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Auth Split Layout"
description = "Reusable auth split layout component."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Auth Split Layout</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Core component</span>
<h1>Auth Split Layout</h1>
<p>Reusable auth split layout component.</p>
<div class="detail-badges"><span>8 props</span><span>2 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="AuthSplitLayout" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Auth Split Layout</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><AuthSplitLayout size='{playground_size}' color='{playground_color}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' brand='{playground_brand}' features='{playground_features}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;AuthSplitLayout
title="Auth Split Layout example"
description="A polished default auth split layout for a modern application."
features='[
<span>&#123;</span>
"label": "Team members",
"values": [
"5",
"Unlimited",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Support",
"values": [
"Email",
"Priority",
"Dedicated"
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Audit history",
"values": [
"7 days",
"90 days",
"Custom"
]
<span>&#125;</span>
]'&gt;
&lt;div data-slot="aside-extra"&gt;
&lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="form"&gt;
&lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
&lt;/div&gt;
&lt;/AuthSplitLayout&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-auth-split-layout-size"><span><strong>size</strong><small>string</small></span><select id="playground-auth-split-layout-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-auth-split-layout-color"><span><strong>color</strong><small>string</small></span><select id="playground-auth-split-layout-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-auth-split-layout-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-auth-split-layout-eyebrow" name="pg_eyebrow" type="text" value="Secure identity" /></label><label class="playground-field" for="playground-auth-split-layout-title"><span><strong>title</strong><small>string</small></span><input id="playground-auth-split-layout-title" name="pg_title" type="text" value="Auth Split Layout example" /></label><label class="playground-field" for="playground-auth-split-layout-description"><span><strong>description</strong><small>string</small></span><input id="playground-auth-split-layout-description" name="pg_description" type="text" value="A polished default auth split layout for a modern application." /></label><label class="playground-field" for="playground-auth-split-layout-brand"><span><strong>brand</strong><small>string</small></span><input id="playground-auth-split-layout-brand" name="pg_brand" type="text" value="Police Management System" /></label><label class="playground-field" for="playground-auth-split-layout-features"><span><strong>features</strong><small>unknown[]</small></span><textarea id="playground-auth-split-layout-features" name="pg_features" rows="5" spellcheck="false" data-playground-json>[
&#123;
"label": "Team members",
"values": [
"5",
"Unlimited",
"Unlimited"
]
&#125;,
&#123;
"label": "Support",
"values": [
"Email",
"Priority",
"Dedicated"
]
&#125;,
&#123;
"label": "Audit history",
"values": [
"7 days",
"90 days",
"Custom"
]
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-auth-split-layout-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-split-layout-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="auth-split-layout-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AuthSplitLayout size="default" title="Auth Split Layout example" description="A polished default auth split layout for a modern application." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AuthSplitLayout
title="Auth Split Layout example"
description="A polished default auth split layout for a modern application."
features='[
<span>&#123;</span>
"label": "Team members",
"values": [
"5",
"Unlimited",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Support",
"values": [
"Email",
"Priority",
"Dedicated"
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Audit history",
"values": [
"7 days",
"90 days",
"Custom"
]
<span>&#125;</span>
]'&gt;
&lt;div data-slot="aside-extra"&gt;
&lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="form"&gt;
&lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
&lt;/div&gt;
&lt;/AuthSplitLayout&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="auth-split-layout-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AuthSplitLayout size="sm" title="Compact Auth Split Layout" description="A compact configuration for dashboards and dense product surfaces." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AuthSplitLayout
size="sm"
title="Compact Auth Split Layout"
description="A compact configuration for dashboards and dense product surfaces."
features='[
<span>&#123;</span>
"label": "Team members",
"values": [
"5",
"Unlimited",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Support",
"values": [
"Email",
"Priority",
"Dedicated"
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Audit history",
"values": [
"7 days",
"90 days",
"Custom"
]
<span>&#125;</span>
]'&gt;
&lt;div data-slot="aside-extra"&gt;
&lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="form"&gt;
&lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
&lt;/div&gt;
&lt;/AuthSplitLayout&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="auth-split-layout-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AuthSplitLayout size="lg" title="Advanced Auth Split Layout" description="A richer configuration demonstrating additional content and hierarchy." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AuthSplitLayout
size="lg"
title="Advanced Auth Split Layout"
description="A richer configuration demonstrating additional content and hierarchy."
features='[
<span>&#123;</span>
"label": "Team members",
"values": [
"5",
"Unlimited",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Support",
"values": [
"Email",
"Priority",
"Dedicated"
]
<span>&#125;</span>,
<span>&#123;</span>
"label": "Audit history",
"values": [
"7 days",
"90 days",
"Custom"
]
<span>&#125;</span>
]'&gt;
&lt;div data-slot="aside-extra"&gt;
&lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="form"&gt;
&lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
&lt;/div&gt;
&lt;/AuthSplitLayout&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>"Secure identity"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Welcome back"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>string</td><td><code>"Police Management System"</code></td><td>No</td></tr><tr><td><code>features</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#auth-split-layout-demo-1">Production default</a><a href="#auth-split-layout-demo-2">Compact application</a><a href="#auth-split-layout-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/auth-form"><small>Previous</small><strong>← Auth Form</strong></a>
<a href="/components/portal-dashboard"><small>Next</small><strong>Portal Dashboard →</strong></a>
</nav>
}
}
app/pages/components/avatar-group.wrn
+174 -561
View File
@@ -1,18 +1,18 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly. // Generated by scripts/generate-showcase.mjs. Do not edit directly.
page AvatarGroupDetail { page AvatarGroupDetail {
layout = "showcase" layout = "showcase"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"avatar-group-0-1\",\"key\":\"avatar-group-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\":\"#avatar-group-demo\",\"actionHref\":\"#avatar-group-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\":\"avatar-group-0-2\",\"key\":\"avatar-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#avatar-group-demo\",\"actionHref\":\"#avatar-group-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") ?? "[{\"name\":\"Aisha Khan\",\"initials\":\"AK\",\"tooltip\":\"Aisha Khan · Product designer\"},{\"name\":\"Daniel Lee\",\"initials\":\"DL\",\"tooltip\":\"Daniel Lee · Engineer\"},{\"name\":\"Maya Patel\",\"initials\":\"MP\",\"tooltip\":\"Maya Patel · Product manager\"},{\"name\":\"Oliver Reed\",\"initials\":\"OR\",\"tooltip\":\"Oliver Reed · Support\"},{\"name\":\"Sofia Chen\",\"initials\":\"SC\",\"tooltip\":\"Sofia Chen · Operations\"}]")
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle" state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "stack" state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "stack"
state playground_maxVisible = Number(ctx.url.searchParams.get("pg_maxVisible") ?? "4") state playground_maxVisible = Number(ctx.url.searchParams.get("pg_maxVisible") ?? "3")
state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3") state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
state playground_borderColor = ctx.url.searchParams.get("pg_borderColor") ?? "" state playground_borderColor = ctx.url.searchParams.get("pg_borderColor") ?? ""
state playground_showTooltips = (ctx.url.searchParams.get("pg_showTooltips") ?? "true") === "true" state playground_showTooltips = (ctx.url.searchParams.get("pg_showTooltips") ?? "true") === "true"
state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Avatar Group" state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Show remaining members"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Avatar Group" title = "Avatar Group"
description = "Theme-aware, responsive avatar group component." description = "Theme-aware, responsive avatar group component."
@@ -38,117 +38,41 @@ page AvatarGroupDetail {
<div class="playground-preview-source" data-playground-preview><AvatarGroup items='{playground_items}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' layout='{playground_layout}' maxVisible='{playground_maxVisible}' columns='{playground_columns}' borderColor='{playground_borderColor}' showTooltips='{playground_showTooltips}' overflowLabel='{playground_overflowLabel}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><AvatarGroup items='{playground_items}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' layout='{playground_layout}' maxVisible='{playground_maxVisible}' columns='{playground_columns}' borderColor='{playground_borderColor}' showTooltips='{playground_showTooltips}' overflowLabel='{playground_overflowLabel}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;AvatarGroup <pre><code data-playground-code>page AvatarGroupExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "avatar-group-0-1", "name": "Aisha Khan",
"key": "avatar-group-0-1", "initials": "AK",
"value": "primary", "tooltip": "Aisha Khan · Product designer"
"label": "Primary workflow", <span>&#125;</span>,
"title": "Primary workflow", <span>&#123;</span>
"description": "A clean default configuration for everyday product interfaces.", "name": "Daniel Lee",
"text": "A configurable sample message.", "initials": "DL",
"href": "#avatar-group-demo", "tooltip": "Daniel Lee · Engineer"
"actionHref": "#avatar-group-demo", <span>&#125;</span>,
"actionLabel": "View details", <span>&#123;</span>
"icon": "icon-[lucide--sparkles]", "name": "Maya Patel",
"iconClass": "icon-[lucide--sparkles]", "initials": "MP",
"variant": "primary", "tooltip": "Maya Patel · Product manager"
"status": "Active", <span>&#125;</span>,
"time": "09:30", <span>&#123;</span>
"current": true, "name": "Oliver Reed",
"selected": true, "initials": "OR",
"checked": true, "tooltip": "Oliver Reed · Support"
"disabled": false, <span>&#125;</span>,
"outgoing": false, <span>&#123;</span>
"open": true, "name": "Sofia Chen",
"number": 1, "initials": "SC",
"count": 16, "tooltip": "Sofia Chen · Operations"
"percentage": 72, <span>&#125;</span>
"color": "#7c3aed", ]
"target": "_self", view <span>&#123;</span>
"ariaLabel": "Open primary workflow 1", &lt;AvatarGroup
"items": [ items="<span>&#123;</span>items<span>&#125;</span>"
<span>&#123;</span> maxVisible="3"
"label": "Nested option A", /&gt;
"value": "nested-a" <span>&#125;</span>
<span>&#125;</span>, <span>&#125;</span></code></pre>
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "avatar-group-0-2",
"key": "avatar-group-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#avatar-group-demo",
"actionHref": "#avatar-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
overflowLabel="Avatar Group"
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -157,112 +81,31 @@ page AvatarGroupDetail {
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-avatar-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-avatar-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "avatar-group-0-1", "name": "Aisha Khan",
"key": "avatar-group-0-1", "initials": "AK",
"value": "primary", "tooltip": "Aisha Khan · Product designer"
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#avatar-group-demo",
"actionHref": "#avatar-group-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;, &#125;,
&#123; &#123;
"id": "avatar-group-0-2", "name": "Daniel Lee",
"key": "avatar-group-0-2", "initials": "DL",
"value": "secondary", "tooltip": "Daniel Lee · Engineer"
"label": "Additional option", &#125;,
"title": "Supporting example", &#123;
"description": "A clean default configuration for everyday product interfaces.", "name": "Maya Patel",
"text": "Another configurable message.", "initials": "MP",
"href": "#avatar-group-demo", "tooltip": "Maya Patel · Product manager"
"actionHref": "#avatar-group-demo", &#125;,
"actionLabel": "View details", &#123;
"icon": "icon-[lucide--sparkles]", "name": "Oliver Reed",
"iconClass": "icon-[lucide--sparkles]", "initials": "OR",
"variant": "primary", "tooltip": "Oliver Reed · Support"
"status": "Active", &#125;,
"time": "09:30", &#123;
"current": false, "name": "Sofia Chen",
"selected": false, "initials": "SC",
"checked": false, "tooltip": "Sofia Chen · Operations"
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-group-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-group-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-avatar-group-layout" name="pg_layout"><option value="stack" selected>stack</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-avatar-group-maxVisible"><span><strong>max Visible</strong><small>number</small></span><input id="playground-avatar-group-maxVisible" name="pg_maxVisible" type="number" value="4" /></label><label class="playground-field" for="playground-avatar-group-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-avatar-group-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-borderColor"><span><strong>border Color</strong><small>string</small></span><input id="playground-avatar-group-borderColor" name="pg_borderColor" type="text" value="" /></label><label class="playground-toggle" for="playground-avatar-group-showTooltips"><span><strong>show Tooltips</strong><small>boolean</small></span><input id="playground-avatar-group-showTooltips" name="pg_showTooltips" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-avatar-group-overflowLabel"><span><strong>overflow Label</strong><small>string</small></span><input id="playground-avatar-group-overflowLabel" name="pg_overflowLabel" type="text" value="Avatar Group" /></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-group-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-group-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-avatar-group-layout" name="pg_layout"><option value="stack" selected>stack</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-avatar-group-maxVisible"><span><strong>max Visible</strong><small>number</small></span><input id="playground-avatar-group-maxVisible" name="pg_maxVisible" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-avatar-group-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-borderColor"><span><strong>border Color</strong><small>string</small></span><input id="playground-avatar-group-borderColor" name="pg_borderColor" type="text" value="" /></label><label class="playground-toggle" for="playground-avatar-group-showTooltips"><span><strong>show Tooltips</strong><small>boolean</small></span><input id="playground-avatar-group-showTooltips" name="pg_showTooltips" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-avatar-group-overflowLabel"><span><strong>overflow Label</strong><small>string</small></span><input id="playground-avatar-group-overflowLabel" name="pg_overflowLabel" type="text" value="Show remaining members" /></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -277,122 +120,46 @@ page AvatarGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="avatar-group-demo-1" class="demo-canvas demo-canvas--1"> <div id="avatar-group-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AvatarGroup items='[{"id":"avatar-group-0-1","key":"avatar-group-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":"#avatar-group-demo","actionHref":"#avatar-group-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":"avatar-group-0-2","key":"avatar-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-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"]}]' size="md" variant="solid" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Avatar Group" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AvatarGroup <pre><code>page AvatarGroupExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "avatar-group-0-1", "name": "Aisha Khan",
"key": "avatar-group-0-1", "initials": "AK",
"value": "primary", "tooltip": "Aisha Khan · Product designer"
"label": "Primary workflow", <span>&#125;</span>,
"title": "Primary workflow", <span>&#123;</span>
"description": "A clean default configuration for everyday product interfaces.", "name": "Daniel Lee",
"text": "A configurable sample message.", "initials": "DL",
"href": "#avatar-group-demo", "tooltip": "Daniel Lee · Engineer"
"actionHref": "#avatar-group-demo", <span>&#125;</span>,
"actionLabel": "View details", <span>&#123;</span>
"icon": "icon-[lucide--sparkles]", "name": "Maya Patel",
"iconClass": "icon-[lucide--sparkles]", "initials": "MP",
"variant": "primary", "tooltip": "Maya Patel · Product manager"
"status": "Active", <span>&#125;</span>,
"time": "09:30", <span>&#123;</span>
"current": true, "name": "Oliver Reed",
"selected": true, "initials": "OR",
"checked": true, "tooltip": "Oliver Reed · Support"
"disabled": false, <span>&#125;</span>,
"outgoing": false, <span>&#123;</span>
"open": true, "name": "Sofia Chen",
"number": 1, "initials": "SC",
"count": 16, "tooltip": "Sofia Chen · Operations"
"percentage": 72, <span>&#125;</span>
"color": "#7c3aed", ]
"target": "_self", view <span>&#123;</span>
"ariaLabel": "Open primary workflow 1", &lt;AvatarGroup
"items": [ items="<span>&#123;</span>items<span>&#125;</span>"
<span>&#123;</span> maxVisible="3"
"label": "Nested option A", /&gt;
"value": "nested-a" <span>&#125;</span>
<span>&#125;</span>, <span>&#125;</span></code></pre>
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "avatar-group-0-2",
"key": "avatar-group-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#avatar-group-demo",
"actionHref": "#avatar-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
overflowLabel="Avatar Group"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -404,124 +171,47 @@ page AvatarGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="avatar-group-demo-2" class="demo-canvas demo-canvas--2"> <div id="avatar-group-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AvatarGroup items='[{"id":"avatar-group-1-1","key":"avatar-group-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":"#avatar-group-demo","actionHref":"#avatar-group-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":"avatar-group-1-2","key":"avatar-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-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"]}]' size="sm" variant="secondary" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Compact example" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="sm" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AvatarGroup <pre><code>page AvatarGroupExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "avatar-group-1-1", "name": "Aisha Khan",
"key": "avatar-group-1-1", "initials": "AK",
"value": "primary", "tooltip": "Aisha Khan · Product designer"
"label": "Secondary workflow", <span>&#125;</span>,
"title": "Secondary workflow", <span>&#123;</span>
"description": "A compact configuration designed for dense application layouts.", "name": "Daniel Lee",
"text": "A configurable sample message.", "initials": "DL",
"href": "#avatar-group-demo", "tooltip": "Daniel Lee · Engineer"
"actionHref": "#avatar-group-demo", <span>&#125;</span>,
"actionLabel": "View details", <span>&#123;</span>
"icon": "icon-[lucide--zap]", "name": "Maya Patel",
"iconClass": "icon-[lucide--zap]", "initials": "MP",
"variant": "secondary", "tooltip": "Maya Patel · Product manager"
"status": "Active", <span>&#125;</span>,
"time": "10:15", <span>&#123;</span>
"current": true, "name": "Oliver Reed",
"selected": true, "initials": "OR",
"checked": true, "tooltip": "Oliver Reed · Support"
"disabled": false, <span>&#125;</span>,
"outgoing": false, <span>&#123;</span>
"open": true, "name": "Sofia Chen",
"number": 1, "initials": "SC",
"count": 24, "tooltip": "Sofia Chen · Operations"
"percentage": 48, <span>&#125;</span>
"color": "#0284c7", ]
"target": "_self", view <span>&#123;</span>
"ariaLabel": "Open secondary workflow 1", &lt;AvatarGroup
"items": [ items="<span>&#123;</span>items<span>&#125;</span>"
<span>&#123;</span> size="sm"
"label": "Nested option A", maxVisible="3"
"value": "nested-a" /&gt;
<span>&#125;</span>, <span>&#125;</span>
<span>&#123;</span> <span>&#125;</span></code></pre>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "avatar-group-1-2",
"key": "avatar-group-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#avatar-group-demo",
"actionHref": "#avatar-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
size="sm"
variant="secondary"
overflowLabel="Compact example"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -533,124 +223,47 @@ page AvatarGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="avatar-group-demo-3" class="demo-canvas demo-canvas--3"> <div id="avatar-group-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AvatarGroup items='[{"id":"avatar-group-2-1","key":"avatar-group-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":"#avatar-group-demo","actionHref":"#avatar-group-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":"avatar-group-2-2","key":"avatar-group-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":"#avatar-group-demo","actionHref":"#avatar-group-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"]}]' size="lg" variant="success" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="grid" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;AvatarGroup <pre><code>page AvatarGroupExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "avatar-group-2-1", "name": "Aisha Khan",
"key": "avatar-group-2-1", "initials": "AK",
"value": "primary", "tooltip": "Aisha Khan · Product designer"
"label": "Advanced workflow", <span>&#125;</span>,
"title": "Advanced workflow", <span>&#123;</span>
"description": "A richer configuration with more supporting information and actions.", "name": "Daniel Lee",
"text": "A configurable sample message.", "initials": "DL",
"href": "#avatar-group-demo", "tooltip": "Daniel Lee · Engineer"
"actionHref": "#avatar-group-demo", <span>&#125;</span>,
"actionLabel": "Explore workflow", <span>&#123;</span>
"icon": "icon-[lucide--circle-check]", "name": "Maya Patel",
"iconClass": "icon-[lucide--circle-check]", "initials": "MP",
"variant": "success", "tooltip": "Maya Patel · Product manager"
"status": "Complete", <span>&#125;</span>,
"time": "11:45", <span>&#123;</span>
"current": true, "name": "Oliver Reed",
"selected": true, "initials": "OR",
"checked": true, "tooltip": "Oliver Reed · Support"
"disabled": false, <span>&#125;</span>,
"outgoing": false, <span>&#123;</span>
"open": true, "name": "Sofia Chen",
"number": 1, "initials": "SC",
"count": 32, "tooltip": "Sofia Chen · Operations"
"percentage": 91, <span>&#125;</span>
"color": "#059669", ]
"target": "_self", view <span>&#123;</span>
"ariaLabel": "Open advanced workflow 1", &lt;AvatarGroup
"items": [ items="<span>&#123;</span>items<span>&#125;</span>"
<span>&#123;</span> layout="grid"
"label": "Nested option A", maxVisible="3"
"value": "nested-a" /&gt;
<span>&#125;</span>, <span>&#125;</span>
<span>&#123;</span> <span>&#125;</span></code></pre>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "avatar-group-2-2",
"key": "avatar-group-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": "#avatar-group-demo",
"actionHref": "#avatar-group-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
size="lg"
variant="success"
overflowLabel="Advanced example"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/avatar.wrn
+33 -30
View File
@@ -2,23 +2,23 @@
page AvatarDetail { page AvatarDetail {
layout = "showcase" layout = "showcase"
state playground_src = ctx.url.searchParams.get("pg_src") ?? "" state playground_src = ctx.url.searchParams.get("pg_src") ?? ""
state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "" state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "Aisha Khan"
state playground_initials = ctx.url.searchParams.get("pg_initials") ?? "" state playground_initials = ctx.url.searchParams.get("pg_initials") ?? "AK"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle" state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
state playground_status = ctx.url.searchParams.get("pg_status") ?? "" state playground_status = ctx.url.searchParams.get("pg_status") ?? ""
state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? "Avatar" state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? ""
state playground_statusPosition = ctx.url.searchParams.get("pg_statusPosition") ?? "bottom" state playground_statusPosition = ctx.url.searchParams.get("pg_statusPosition") ?? "bottom"
state playground_badge = ctx.url.searchParams.get("pg_badge") ?? "" state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? "" state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? ""
state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? "Avatar" state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? ""
state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? "" state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? "Aisha Khan · Product designer"
state playground_name = ctx.url.searchParams.get("pg_name") ?? "" state playground_name = ctx.url.searchParams.get("pg_name") ?? "Aisha Khan"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy" state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Avatar" title = "Avatar"
description = "Theme-aware, responsive avatar component." description = "Theme-aware, responsive avatar component."
@@ -45,9 +45,10 @@ page AvatarDetail {
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Avatar <pre><code data-playground-code>&lt;Avatar
statusLabel="Avatar" alt="Aisha Khan"
badgeLabel="Avatar" initials="AK"
description="A polished default avatar for a modern application." tooltip="Aisha Khan · Product designer"
name="Aisha Khan"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -55,7 +56,7 @@ page AvatarDetail {
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="Avatar" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="Avatar" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="A polished default avatar for a modern application." /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="Aisha Khan" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="AK" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="Aisha Khan · Product designer" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="Aisha Khan" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -70,15 +71,16 @@ page AvatarDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="avatar-demo-1" class="demo-canvas demo-canvas--1"> <div id="avatar-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Avatar size="md" variant="solid" statusLabel="Avatar" badgeLabel="Avatar" description="A polished default avatar for a modern application." class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Avatar <pre><code>&lt;Avatar
statusLabel="Avatar" alt="Aisha Khan"
badgeLabel="Avatar" initials="AK"
description="A polished default avatar for a modern application." tooltip="Aisha Khan · Product designer"
name="Aisha Khan"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -91,17 +93,17 @@ page AvatarDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="avatar-demo-2" class="demo-canvas demo-canvas--2"> <div id="avatar-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Avatar size="sm" variant="secondary" statusLabel="Compact example" badgeLabel="Compact example" description="A compact configuration for dashboards and dense product surfaces." class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="sm" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Avatar <pre><code>&lt;Avatar
alt="Aisha Khan"
initials="AK"
size="sm" size="sm"
variant="secondary" tooltip="Aisha Khan · Product designer"
statusLabel="Compact example" name="Aisha Khan"
badgeLabel="Compact example"
description="A compact configuration for dashboards and dense product surfaces."
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -114,17 +116,18 @@ page AvatarDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="avatar-demo-3" class="demo-canvas demo-canvas--3"> <div id="avatar-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Avatar size="lg" variant="success" statusLabel="Advanced example" badgeLabel="Advanced example" description="A richer configuration demonstrating additional content and hierarchy." class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="online" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="Product designer" loading="lazy" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Avatar <pre><code>&lt;Avatar
size="lg" alt="Aisha Khan"
variant="success" initials="AK"
statusLabel="Advanced example" status="online"
badgeLabel="Advanced example" tooltip="Aisha Khan · Product designer"
description="A richer configuration demonstrating additional content and hierarchy." name="Aisha Khan"
description="Product designer"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
app/pages/components/back-to-top.wrn
+16 -34
View File
@@ -2,20 +2,20 @@
page BackToTopDetail { page BackToTopDetail {
layout = "showcase" layout = "showcase"
state playground_threshold = Number(ctx.url.searchParams.get("pg_threshold") ?? "500") state playground_threshold = Number(ctx.url.searchParams.get("pg_threshold") ?? "500")
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Back To Top" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Back to top"
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Back To Top 1 example" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Scroll back to top"
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "icon-[lucide--arrow-up]"
state playground_position = ctx.url.searchParams.get("pg_position") ?? "right" state playground_position = ctx.url.searchParams.get("pg_position") ?? "right"
state playground_offset = ctx.url.searchParams.get("pg_offset") ?? "md" state playground_offset = ctx.url.searchParams.get("pg_offset") ?? "md"
state playground_behavior = ctx.url.searchParams.get("pg_behavior") ?? "smooth" state playground_behavior = ctx.url.searchParams.get("pg_behavior") ?? "smooth"
state playground_showProgress = (ctx.url.searchParams.get("pg_showProgress") ?? "true") === "true" state playground_showProgress = (ctx.url.searchParams.get("pg_showProgress") ?? "false") === "true"
state playground_showLabel = (ctx.url.searchParams.get("pg_showLabel") ?? "true") === "true" state playground_showLabel = (ctx.url.searchParams.get("pg_showLabel") ?? "false") === "true"
state playground_alwaysVisible = (ctx.url.searchParams.get("pg_alwaysVisible") ?? "true") === "true" state playground_alwaysVisible = (ctx.url.searchParams.get("pg_alwaysVisible") ?? "true") === "true"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "round" state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "round"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Back To Top" title = "Back To Top"
description = "Provide a responsive floating control that returns long pages to the top and can show scroll progress." description = "Provide a responsive floating control that returns long pages to the top and can show scroll progress."
@@ -41,19 +41,14 @@ page BackToTopDetail {
<div class="playground-preview-source" data-playground-preview><BackToTop threshold='{playground_threshold}' label='{playground_label}' ariaLabel='{playground_ariaLabel}' icon='{playground_icon}' position='{playground_position}' offset='{playground_offset}' behavior='{playground_behavior}' showProgress='{playground_showProgress}' showLabel='{playground_showLabel}' alwaysVisible='{playground_alwaysVisible}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><BackToTop threshold='{playground_threshold}' label='{playground_label}' ariaLabel='{playground_ariaLabel}' icon='{playground_icon}' position='{playground_position}' offset='{playground_offset}' behavior='{playground_behavior}' showProgress='{playground_showProgress}' showLabel='{playground_showLabel}' alwaysVisible='{playground_alwaysVisible}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;BackToTop <pre><code data-playground-code>&lt;BackToTop /&gt;</code></pre>
label="Back To Top"
ariaLabel="Back To Top 1 example"
showProgress="true"
showLabel="true"
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>15 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>15 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-back-to-top-threshold"><span><strong>threshold</strong><small>number</small></span><input id="playground-back-to-top-threshold" name="pg_threshold" type="number" value="500" /></label><label class="playground-field" for="playground-back-to-top-label"><span><strong>label</strong><small>string</small></span><input id="playground-back-to-top-label" name="pg_label" type="text" value="Back To Top" /></label><label class="playground-field" for="playground-back-to-top-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-back-to-top-ariaLabel" name="pg_ariaLabel" type="text" value="Back To Top 1 example" /></label><label class="playground-field" for="playground-back-to-top-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-back-to-top-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-back-to-top-position"><span><strong>position</strong><small>string</small></span><select id="playground-back-to-top-position" name="pg_position"><option value="right" selected>right</option><option value="left">left</option><option value="center">center</option><option value="top">top</option><option value="bottom">bottom</option><option value="start">start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-back-to-top-offset"><span><strong>offset</strong><small>string</small></span><select id="playground-back-to-top-offset" name="pg_offset"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-back-to-top-behavior"><span><strong>behavior</strong><small>string</small></span><select id="playground-back-to-top-behavior" name="pg_behavior"><option value="smooth" selected>smooth</option><option value="auto">auto</option></select></label><label class="playground-toggle" for="playground-back-to-top-showProgress"><span><strong>show Progress</strong><small>boolean</small></span><input id="playground-back-to-top-showProgress" name="pg_showProgress" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-showLabel"><span><strong>show Label</strong><small>boolean</small></span><input id="playground-back-to-top-showLabel" name="pg_showLabel" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-alwaysVisible"><span><strong>always Visible</strong><small>boolean</small></span><input id="playground-back-to-top-alwaysVisible" name="pg_alwaysVisible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-back-to-top-size"><span><strong>size</strong><small>string</small></span><select id="playground-back-to-top-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-back-to-top-color"><span><strong>color</strong><small>string</small></span><select id="playground-back-to-top-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-back-to-top-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-back-to-top-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="outline">outline</option><option value="ghost">ghost</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-back-to-top-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-back-to-top-shape" name="pg_shape"><option value="round" selected>round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-back-to-top-class"><span><strong>class</strong><small>string</small></span><input id="playground-back-to-top-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-back-to-top-threshold"><span><strong>threshold</strong><small>number</small></span><input id="playground-back-to-top-threshold" name="pg_threshold" type="number" value="500" /></label><label class="playground-field" for="playground-back-to-top-label"><span><strong>label</strong><small>string</small></span><input id="playground-back-to-top-label" name="pg_label" type="text" value="Back to top" /></label><label class="playground-field" for="playground-back-to-top-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-back-to-top-ariaLabel" name="pg_ariaLabel" type="text" value="Scroll back to top" /></label><label class="playground-field" for="playground-back-to-top-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-back-to-top-icon" name="pg_icon" type="text" value="icon-[lucide--arrow-up]" /></label><label class="playground-field" for="playground-back-to-top-position"><span><strong>position</strong><small>string</small></span><select id="playground-back-to-top-position" name="pg_position"><option value="right" selected>right</option><option value="left">left</option><option value="center">center</option><option value="top">top</option><option value="bottom">bottom</option><option value="start">start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-back-to-top-offset"><span><strong>offset</strong><small>string</small></span><select id="playground-back-to-top-offset" name="pg_offset"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-back-to-top-behavior"><span><strong>behavior</strong><small>string</small></span><select id="playground-back-to-top-behavior" name="pg_behavior"><option value="smooth" selected>smooth</option><option value="auto">auto</option></select></label><label class="playground-toggle" for="playground-back-to-top-showProgress"><span><strong>show Progress</strong><small>boolean</small></span><input id="playground-back-to-top-showProgress" name="pg_showProgress" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-showLabel"><span><strong>show Label</strong><small>boolean</small></span><input id="playground-back-to-top-showLabel" name="pg_showLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-alwaysVisible"><span><strong>always Visible</strong><small>boolean</small></span><input id="playground-back-to-top-alwaysVisible" name="pg_alwaysVisible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-back-to-top-size"><span><strong>size</strong><small>string</small></span><select id="playground-back-to-top-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-back-to-top-color"><span><strong>color</strong><small>string</small></span><select id="playground-back-to-top-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-back-to-top-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-back-to-top-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="outline">outline</option><option value="ghost">ghost</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-back-to-top-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-back-to-top-shape" name="pg_shape"><option value="round" selected>round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-back-to-top-class"><span><strong>class</strong><small>string</small></span><input id="playground-back-to-top-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -68,16 +63,12 @@ page BackToTopDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="back-to-top-demo-1" class="demo-canvas demo-canvas--1"> <div id="back-to-top-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><BackToTop threshold="500" label="Back To Top" ariaLabel="Back To Top 1 example" icon="" position="right" showProgress="true" showLabel="true" alwaysVisible="true" size="default" variant="solid" shape="round" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="solid" shape="round" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Floating round control usage"> <section class="demo-code" aria-label="Floating round control usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;BackToTop <pre><code>&lt;BackToTop
label="Back To Top"
ariaLabel="Back To Top 1 example"
showProgress="true"
showLabel="true"
alwaysVisible="true" alwaysVisible="true"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
@@ -91,18 +82,14 @@ page BackToTopDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="back-to-top-demo-2" class="demo-canvas demo-canvas--2"> <div id="back-to-top-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Back To Top 2 example" icon="icon-[lucide--arrow-right]" position="right" showProgress="true" showLabel="true" alwaysVisible="true" size="sm" variant="soft" shape="pill" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="true" alwaysVisible="true" size="default" color="primary" variant="soft" shape="pill" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Pill control with label usage"> <section class="demo-code" aria-label="Pill control with label usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;BackToTop <pre><code>&lt;BackToTop
ariaLabel="Back To Top 2 example"
icon="icon-[lucide--arrow-right]"
showProgress="true"
showLabel="true" showLabel="true"
alwaysVisible="true" alwaysVisible="true"
size="sm"
variant="soft" variant="soft"
shape="pill" shape="pill"
/&gt;</code></pre> /&gt;</code></pre>
@@ -117,27 +104,22 @@ page BackToTopDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="back-to-top-demo-3" class="demo-canvas demo-canvas--3"> <div id="back-to-top-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><BackToTop threshold="500" label="Advanced example" ariaLabel="Back To Top 3 example" icon="icon-[lucide--trash-2]" position="left" offset="lg" showProgress="true" showLabel="true" alwaysVisible="true" size="lg" variant="outline" shape="round" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="left" offset="lg" behavior="smooth" showProgress="true" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="outline" shape="round" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Progress-aware control usage"> <section class="demo-code" aria-label="Progress-aware control usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;BackToTop <pre><code>&lt;BackToTop
label="Advanced example"
ariaLabel="Back To Top 3 example"
icon="icon-[lucide--trash-2]"
position="left" position="left"
offset="lg" offset="lg"
showProgress="true" showProgress="true"
showLabel="true"
alwaysVisible="true" alwaysVisible="true"
size="lg"
variant="outline" variant="outline"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alwaysVisible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"round"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alwaysVisible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"round"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
app/pages/components/badge.wrn
+34 -41
View File
@@ -1,25 +1,26 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly. // Generated by scripts/generate-showcase.mjs. Do not edit directly.
page BadgeDetail { page BadgeDetail {
layout = "showcase" layout = "showcase"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Badge" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Active"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" state playground_humanize = (ctx.url.searchParams.get("pg_humanize") ?? "true") === "true"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_size = ctx.url.searchParams.get("pg_size") ?? "sm"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid" state playground_color = ctx.url.searchParams.get("pg_color") ?? "success"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "soft"
state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "pill" state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "pill"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
state playground_dot = (ctx.url.searchParams.get("pg_dot") ?? "false") === "true" state playground_dot = (ctx.url.searchParams.get("pg_dot") ?? "false") === "true"
state playground_dotOnly = (ctx.url.searchParams.get("pg_dotOnly") ?? "false") === "true" state playground_dotOnly = (ctx.url.searchParams.get("pg_dotOnly") ?? "false") === "true"
state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Badge" state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Status"
state playground_animated = (ctx.url.searchParams.get("pg_animated") ?? "false") === "true" state playground_animated = (ctx.url.searchParams.get("pg_animated") ?? "false") === "true"
state playground_avatarSrc = ctx.url.searchParams.get("pg_avatarSrc") ?? "" state playground_avatarSrc = ctx.url.searchParams.get("pg_avatarSrc") ?? ""
state playground_avatarAlt = ctx.url.searchParams.get("pg_avatarAlt") ?? "" state playground_avatarAlt = ctx.url.searchParams.get("pg_avatarAlt") ?? ""
state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true" state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "false") === "true"
state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Badge" state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Remove badge"
state playground_truncate = (ctx.url.searchParams.get("pg_truncate") ?? "false") === "true" state playground_truncate = (ctx.url.searchParams.get("pg_truncate") ?? "false") === "true"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "12rem" state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "12rem"
state playground_anchorLabel = ctx.url.searchParams.get("pg_anchorLabel") ?? "Badge" state playground_anchorLabel = ctx.url.searchParams.get("pg_anchorLabel") ?? ""
state playground_anchorIcon = ctx.url.searchParams.get("pg_anchorIcon") ?? "" state playground_anchorIcon = ctx.url.searchParams.get("pg_anchorIcon") ?? ""
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "inline" state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "inline"
state playground_anchorLabelText = ctx.url.searchParams.get("pg_anchorLabelText") ?? "Badge anchor" state playground_anchorLabelText = ctx.url.searchParams.get("pg_anchorLabelText") ?? "Badge anchor"
@@ -36,7 +37,7 @@ page BadgeDetail {
<span class="showcase-eyebrow">Base component</span> <span class="showcase-eyebrow">Base component</span>
<h1>Badge</h1> <h1>Badge</h1>
<p>Theme-aware, responsive badge component.</p> <p>Theme-aware, responsive badge component.</p>
<div class="detail-badges"><span>22 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>23 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -45,22 +46,22 @@ page BadgeDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Badge label='{playground_label}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' dot='{playground_dot}' dotOnly='{playground_dotOnly}' dotLabel='{playground_dotLabel}' animated='{playground_animated}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' truncate='{playground_truncate}' maxWidth='{playground_maxWidth}' anchorLabel='{playground_anchorLabel}' anchorIcon='{playground_anchorIcon}' placement='{playground_placement}' anchorLabelText='{playground_anchorLabelText}' /></div> <div class="playground-preview-source" data-playground-preview><Badge label='{playground_label}' humanize='{playground_humanize}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' dot='{playground_dot}' dotOnly='{playground_dotOnly}' dotLabel='{playground_dotLabel}' animated='{playground_animated}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' truncate='{playground_truncate}' maxWidth='{playground_maxWidth}' anchorLabel='{playground_anchorLabel}' anchorIcon='{playground_anchorIcon}' placement='{playground_placement}' anchorLabelText='{playground_anchorLabelText}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Badge <pre><code data-playground-code>&lt;Badge
dotLabel="Badge" label="Active"
dismissible="true" size="sm"
dismissLabel="Badge" color="success"
anchorLabel="Badge" variant="soft"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-badge-label"><span><strong>label</strong><small>string</small></span><input id="playground-badge-label" name="pg_label" type="text" value="Badge" /></label><label class="playground-field" for="playground-badge-size"><span><strong>size</strong><small>string</small></span><select id="playground-badge-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-badge-color"><span><strong>color</strong><small>string</small></span><select id="playground-badge-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-badge-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-badge-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-badge-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-badge-shape" name="pg_shape"><option value="pill" selected>pill</option><option value="round">round</option><option value="rounded">rounded</option></select></label><label class="playground-field" for="playground-badge-class"><span><strong>class</strong><small>string</small></span><input id="playground-badge-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-badge-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-badge-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-badge-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-badge-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-toggle" for="playground-badge-dot"><span><strong>dot</strong><small>boolean</small></span><input id="playground-badge-dot" name="pg_dot" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-badge-dotOnly"><span><strong>dot Only</strong><small>boolean</small></span><input id="playground-badge-dotOnly" name="pg_dotOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dotLabel"><span><strong>dot Label</strong><small>string</small></span><input id="playground-badge-dotLabel" name="pg_dotLabel" type="text" value="Badge" /></label><label class="playground-toggle" for="playground-badge-animated"><span><strong>animated</strong><small>boolean</small></span><input id="playground-badge-animated" name="pg_animated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-badge-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-badge-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-badge-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-toggle" for="playground-badge-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-badge-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-badge-dismissLabel" name="pg_dismissLabel" type="text" value="Badge" /></label><label class="playground-toggle" for="playground-badge-truncate"><span><strong>truncate</strong><small>boolean</small></span><input id="playground-badge-truncate" name="pg_truncate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-badge-maxWidth" name="pg_maxWidth"><option value="12rem" selected>12rem</option><option value="cLine truncated <div class="playground-fields"><label class="playground-field" for="playground-badge-label"><span><strong>label</strong><small>string</small></span><input id="playground-badge-label" name="pg_label" type="text" value="Active" /></label><label class="playground-toggle" for="playground-badge-humanize"><span><strong>humanize</strong><small>boolean</small></span><input id="playground-badge-humanize" name="pg_humanize" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-size"><span><strong>size</strong><small>string</small></span><select id="playground-badge-size" name="pg_size"><option value="sm" selected>sm</option><option value="md">md</option><option value="default">default</option><option value="xs">xs</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-badge-color"><span><strong>color</strong><small>string</small></span><select id="playground-badge-color" name="pg_color"><option value="success" selected>success</option><option value="primary">primary</option><option value="secondary">secondary</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-badge-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-badge-variant" name="pg_variant" type="text" value="soft" /></label><label class="playground-field" for="playground-badge-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-badge-shape" name="pg_shape"><option value="pill" selected>pill</option><option value="round">round</option><option value="rounded">rounded</option></select></label><label class="playground-field" for="playground-badge-class"><span><strong>class</strong><small>string</small></span><input id="playground-badge-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-badge-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-badge-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-badge-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-badge-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-toggle" for="playground-badge-dot"><span><strong>dot</strong><small>boolean</small></span><input id="playground-badge-dot" name="pg_dot" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-badge-dotOnly"><span><strong>dot Only</strong><small>boolean</small></span><input id="playground-badge-dotOnly" name="pg_dotOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dotLabel"><span><strong>dot Label</strong><small>string</small></span><input id="playground-badge-dotLabel" name="pg_dotLabel" type="text" value="Status" /></label><label class="playground-toggle" for="playground-badge-animated"><span><strong>animated</strong><small>boolean</small></span><input id="playground-badge-animated" name="pg_animated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-badge-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-badge-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-badge-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-toggle" for="playground-badge-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-badge-dismissible" name="pg_dismissible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-badge-dismissLabel" name="pg_dismissLabel" type="text" value="Remove badge" /></label><label class="playground-toggle" for="playground-badge-truncate"><span><strong>truncate</strong><small>boolean</small></span><input id="playground-badge-truncate" name="pg_truncate" type="checkbox" value="true" data-playground-boolean Line truncated
</form> </form>
</div> </div>
</section> </section>
@@ -75,16 +76,16 @@ page BadgeDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="badge-demo-1" class="demo-canvas demo-canvas--1"> <div id="badge-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Badge label="Badge" size="md" variant="solid" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Badge" animated="false" dismissible="true" dismissLabel="Badge" truncate="false" anchorLabel="Badge" /></div> <div class="demo-render"><Badge label="Active" humanize="true" size="sm" color="success" variant="soft" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Badge <pre><code>&lt;Badge
dotLabel="Badge" label="Active"
dismissible="true" size="sm"
dismissLabel="Badge" color="success"
anchorLabel="Badge" variant="soft"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -97,20 +98,16 @@ page BadgeDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="badge-demo-2" class="demo-canvas demo-canvas--2"> <div id="badge-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Badge label="Compact example" size="sm" variant="secondary" class="showcase-instance showcase-instance--2" icon="icon-[lucide--arrow-right]" dot="false" dotOnly="false" dotLabel="Compact example" animated="false" dismissible="true" dismissLabel="Compact example" truncate="false" anchorLabel="Compact example" /></div> <div class="demo-render"><Badge label="In review" humanize="true" size="sm" color="warning" variant="outline" class="showcase-instance showcase-instance--2" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Badge <pre><code>&lt;Badge
label="Compact example" label="In review"
size="sm" size="sm"
variant="secondary" color="warning"
icon="icon-[lucide--arrow-right]" variant="outline"
dotLabel="Compact example"
dismissible="true"
dismissLabel="Compact example"
anchorLabel="Compact example"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -123,20 +120,16 @@ page BadgeDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="badge-demo-3" class="demo-canvas demo-canvas--3"> <div id="badge-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Badge label="Advanced example" size="lg" variant="success" class="showcase-instance showcase-instance--3" icon="icon-[lucide--trash-2]" dot="false" dotOnly="false" dotLabel="Advanced example" animated="false" dismissible="true" dismissLabel="Advanced example" truncate="false" anchorLabel="Advanced example" /></div> <div class="demo-render"><Badge label="Verified" humanize="true" size="sm" color="primary" variant="solid" class="showcase-instance showcase-instance--3" icon="icon-[lucide--check]" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="true" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Badge <pre><code>&lt;Badge
label="Advanced example" label="Verified"
size="lg" size="sm"
variant="success" icon="icon-[lucide--check]"
icon="icon-[lucide--trash-2]"
dotLabel="Advanced example"
dismissible="true" dismissible="true"
dismissLabel="Advanced example"
anchorLabel="Advanced example"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -150,7 +143,7 @@ const component = document.querySelector("[data-ui-component=\"Badge\"], [data-c
if (component) registerOutputHandler(component, "dismiss", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "dismiss", (payload) =&gt; <span>&#123;</span>
console.log("dismiss", payload) console.log("dismiss", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Badge"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"pill"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>dot</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotOnly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotLabel</code></td><td>string</td><td><code>"Status"</code></td><td>No</td></tr><tr><td><code>animated</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Remove badge"</code></td><td>No</td></tr><tr><td><code>truncate</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"12rem"</code></td><td>No</td></tr><tr><td><code>anchorLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>anchorIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>anchorLabelText</code></td><td>string</td><td><code>"Badge anchor"</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Badge"</code></td><td>No</td></tr><tr><td><code>humanize</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"pill"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>dot</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotOnly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotLabel</code></td><td>string</td><td><code>"Status"</code></td><td>No</td></tr><tr><td><code>animated</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Remove badge"</code></td><td>No</td></tr><tr><td><code>truncate</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"12rem"</code></td><td>No</td></tr><tr><td><code>anchorLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>anchorIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>anchorLabelText</code></td><td>string</td><td><code>"Badge anchor"</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#badge-demo-1">Production default</a><a href="#badge-demo-2">Compact application</a><a href="#badge-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#badge-demo-1">Production default</a><a href="#badge-demo-2">Compact application</a><a href="#badge-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/blockquote.wrn
+11 -10
View File
@@ -13,6 +13,7 @@ page BlockquoteDetail {
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_quoteMark = (ctx.url.searchParams.get("pg_quoteMark") ?? "true") === "true" state playground_quoteMark = (ctx.url.searchParams.get("pg_quoteMark") ?? "true") === "true"
state playground_italic = (ctx.url.searchParams.get("pg_italic") ?? "true") === "true" state playground_italic = (ctx.url.searchParams.get("pg_italic") ?? "true") === "true"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo { seo {
title = "Blockquote" title = "Blockquote"
@@ -27,7 +28,7 @@ page BlockquoteDetail {
<span class="showcase-eyebrow">Base component</span> <span class="showcase-eyebrow">Base component</span>
<h1>Blockquote</h1> <h1>Blockquote</h1>
<p>Theme-aware, responsive blockquote component.</p> <p>Theme-aware, responsive blockquote component.</p>
<div class="detail-badges"><span>13 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>14 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -36,7 +37,7 @@ page BlockquoteDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Blockquote quote='{playground_quote}' citation='{playground_citation}' citationTitle='{playground_citationTitle}' citationUrl='{playground_citationUrl}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' size='{playground_size}' color='{playground_color}' align='{playground_align}' variant='{playground_variant}' quoteMark='{playground_quoteMark}' italic='{playground_italic}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Blockquote quote='{playground_quote}' citation='{playground_citation}' citationTitle='{playground_citationTitle}' citationUrl='{playground_citationUrl}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' size='{playground_size}' color='{playground_color}' align='{playground_align}' variant='{playground_variant}' quoteMark='{playground_quoteMark}' italic='{playground_italic}' maxWidth='{playground_maxWidth}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Blockquote <pre><code data-playground-code>&lt;Blockquote
@@ -45,11 +46,11 @@ page BlockquoteDetail {
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-blockquote-quote"><span><strong>quote</strong><small>string</small></span><input id="playground-blockquote-quote" name="pg_quote" type="text" value="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." /></label><label class="playground-field" for="playground-blockquote-citation"><span><strong>citation</strong><small>string</small></span><input id="playground-blockquote-citation" name="pg_citation" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationTitle"><span><strong>citation Title</strong><small>string</small></span><input id="playground-blockquote-citationTitle" name="pg_citationTitle" type="text" value="Blockquote example" /></label><label class="playground-field" for="playground-blockquote-citationUrl"><span><strong>citation Url</strong><small>string</small></span><input id="playground-blockquote-citationUrl" name="pg_citationUrl" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-blockquote-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-blockquote-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-size"><span><strong>size</strong><small>string</small></span><select id="playground-blockquote-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-blockquote-color"><span><strong>color</strong><small>string</small></span><select id="playground-blockquote-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-blockquote-align"><span><strong>align</strong><small>string</small></span><select id="playground-blockquote-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-blockquote-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-toggle" for="playground-blockquote-quoteMark"><span><strong>quote Mark</strong><small>boolean</small></span><input id="playground-blockquote-quoteMark" name="pg_quoteMark" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-blockquote-italic"><span><strong>italic</strong><small>boolean</small></span><input id="playground-blockquote-italic" name="pg_italic" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-blockquote-class"><span><strong>class</strong><small>string</small></span><input id="playground-blockquote-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-blockquote-quote"><span><strong>quote</strong><small>string</small></span><input id="playground-blockquote-quote" name="pg_quote" type="text" value="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." /></label><label class="playground-field" for="playground-blockquote-citation"><span><strong>citation</strong><small>string</small></span><input id="playground-blockquote-citation" name="pg_citation" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationTitle"><span><strong>citation Title</strong><small>string</small></span><input id="playground-blockquote-citationTitle" name="pg_citationTitle" type="text" value="Blockquote example" /></label><label class="playground-field" for="playground-blockquote-citationUrl"><span><strong>citation Url</strong><small>string</small></span><input id="playground-blockquote-citationUrl" name="pg_citationUrl" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-blockquote-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-blockquote-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-size"><span><strong>size</strong><small>string</small></span><select id="playground-blockquote-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-blockquote-color"><span><strong>color</strong><small>string</small></span><select id="playground-blockquote-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-blockquote-align"><span><strong>align</strong><small>string</small></span><select id="playground-blockquote-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-blockquote-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-toggle" for="playground-blockquote-quoteMark"><span><strong>quote Mark</strong><small>boolean</small></span><input id="playground-blockquote-quoteMark" name="pg_quoteMark" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-blockquote-italic"><span><strong>italic</strong><small>boolean</small></span><input id="playground-blockquote-italic" name="pg_italic" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-blockquote-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-blockquote-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-blockquote-class"><span><strong>class</strong><small>string</small></span><input id="playground-blockquote-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -64,7 +65,7 @@ page BlockquoteDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="blockquote-demo-1" class="demo-canvas demo-canvas--1"> <div id="blockquote-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Blockquote citationTitle="Blockquote example" size="md" align="start" variant="default" quoteMark="true" italic="true" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Blockquote citationTitle="Blockquote example" size="md" align="start" variant="default" quoteMark="true" italic="true" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
@@ -84,7 +85,7 @@ page BlockquoteDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="blockquote-demo-2" class="demo-canvas demo-canvas--2"> <div id="blockquote-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Blockquote citationTitle="Compact Blockquote" size="sm" align="center" variant="secondary" quoteMark="true" italic="true" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Blockquote citationTitle="Compact Blockquote" size="sm" align="center" variant="secondary" quoteMark="true" italic="true" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
@@ -106,7 +107,7 @@ page BlockquoteDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="blockquote-demo-3" class="demo-canvas demo-canvas--3"> <div id="blockquote-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Blockquote citationTitle="Advanced Blockquote" size="lg" align="end" variant="success" quoteMark="true" italic="true" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Blockquote citationTitle="Advanced Blockquote" size="lg" align="end" variant="success" quoteMark="true" italic="true" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
@@ -120,8 +121,8 @@ page BlockquoteDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#blockquote-demo-1">Production default</a><a href="#blockquote-demo-2">Compact application</a><a href="#blockquote-demo-3">Rich configuration</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#blockquote-demo-1">Production default</a><a href="#blockquote-demo-2">Compact application</a><a href="#blockquote-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
app/pages/components/breadcrumb.wrn
+210 -189
View File
@@ -4,6 +4,7 @@ page BreadcrumbDetail {
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Breadcrumb" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Breadcrumb"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"breadcrumb-0-1\",\"key\":\"breadcrumb-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\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-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\":\"breadcrumb-0-2\",\"key\":\"breadcrumb-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-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") ?? "[{\"id\":\"breadcrumb-0-1\",\"key\":\"breadcrumb-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\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-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\":\"breadcrumb-0-2\",\"key\":\"breadcrumb-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
state playground_active = ctx.url.searchParams.get("pg_active") ?? "" state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
state playground_activeIcon = ctx.url.searchParams.get("pg_activeIcon") ?? "icon-[lucide--file-text]"
state playground_separator = ctx.url.searchParams.get("pg_separator") ?? "chevron" state playground_separator = ctx.url.searchParams.get("pg_separator") ?? "chevron"
state playground_showHome = (ctx.url.searchParams.get("pg_showHome") ?? "true") === "true" state playground_showHome = (ctx.url.searchParams.get("pg_showHome") ?? "true") === "true"
state playground_homeLabel = ctx.url.searchParams.get("pg_homeLabel") ?? "Breadcrumb" state playground_homeLabel = ctx.url.searchParams.get("pg_homeLabel") ?? "Breadcrumb"
@@ -26,7 +27,7 @@ page BreadcrumbDetail {
<span class="showcase-eyebrow">Navigation component</span> <span class="showcase-eyebrow">Navigation component</span>
<h1>Breadcrumb</h1> <h1>Breadcrumb</h1>
<p>Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.</p> <p>Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.</p>
<div class="detail-badges"><span>12 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>13 props</span><span>0 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -35,128 +36,133 @@ page BreadcrumbDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Breadcrumb label='{playground_label}' items='{playground_items}' active='{playground_active}' separator='{playground_separator}' showHome='{playground_showHome}' homeLabel='{playground_homeLabel}' homeHref='{playground_homeHref}' homeIcon='{playground_homeIcon}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Breadcrumb label='{playground_label}' items='{playground_items}' active='{playground_active}' activeIcon='{playground_activeIcon}' separator='{playground_separator}' showHome='{playground_showHome}' homeLabel='{playground_homeLabel}' homeHref='{playground_homeHref}' homeIcon='{playground_homeIcon}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Breadcrumb <pre><code data-playground-code>page BreadcrumbExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "breadcrumb-0-1", "id": "breadcrumb-0-1",
"key": "breadcrumb-0-1", "key": "breadcrumb-0-1",
"value": "primary", "value": "primary",
"label": "Primary workflow", "label": "Primary workflow",
"title": "Primary workflow", "title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.", "text": "A configurable sample message.",
"href": "#breadcrumb-demo", "href": "#breadcrumb-demo",
"actionHref": "#breadcrumb-demo", "actionHref": "#breadcrumb-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": true, "current": true,
"selected": true, "selected": true,
"checked": true, "checked": true,
"disabled": false, "disabled": false,
"outgoing": false, "outgoing": false,
"open": true, "open": true,
"number": 1, "number": 1,
"count": 16, "count": 16,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 1", "ariaLabel": "Open primary workflow 1",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"id": "breadcrumb-0-2", "id": "breadcrumb-0-2",
"key": "breadcrumb-0-2", "key": "breadcrumb-0-2",
"value": "secondary", "value": "secondary",
"label": "Additional option", "label": "Additional option",
"title": "Supporting example", "title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.", "text": "Another configurable message.",
"href": "#breadcrumb-demo", "href": "#breadcrumb-demo",
"actionHref": "#breadcrumb-demo", "actionHref": "#breadcrumb-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": false, "current": false,
"selected": false, "selected": false,
"checked": false, "checked": false,
"disabled": false, "disabled": false,
"outgoing": true, "outgoing": true,
"open": true, "open": true,
"number": 2, "number": 2,
"count": 32, "count": 32,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 2", "ariaLabel": "Open primary workflow 2",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span> <span>&#125;</span>
]' ]
showHome="true" view <span>&#123;</span>
homeLabel="Breadcrumb" &lt;Breadcrumb
homeHref="#breadcrumb-demo" items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;</code></pre> showHome="true"
homeLabel="Breadcrumb"
homeHref="#breadcrumb-demo"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "breadcrumb-0-1", "id": "breadcrumb-0-1",
@@ -264,7 +270,7 @@ page BreadcrumbDetail {
"Standard" "Standard"
] ]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-breadcrumb-active"><span><strong>active</strong><small>string</small></span><input id="playground-breadcrumb-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-breadcrumb-separator"><span><strong>separator</strong><small>string</small></span><select id="playground-breadcrumb-separator" name="pg_separator"><option value="chevron" selected>chevron</option><option value="slash">slash</option><option value="dot">dot</option><option value="arrow">arrow</option></select></label><label class="playground-toggle" for="playground-breadcrumb-showHome"><span><strong>show Home</strong><small>boolean</small></span><input id="playground-breadcrumb-showHome" name="pg_showHome" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-breadcrumb-homeLabel"><span><strong>home Label</strong><small>string</small></span><input id="playground-breadcrumb-homeLabel" name="pg_homeLabel" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-homeHref"><span><strong>home Href</strong><small>string</small></span><input id="playground-breadcrumb-homeHref" name="pg_homeHref" type="text" value="#breadcrumb-demo" /></label><label class="playground-field" for="playground-breadcrumb-homeIcon"><span><strong>home Icon</strong><small>string</small></span><input id="playground-breadcrumb-homeIcon" name="pg_homeIcon" type="text" value="icon-[lucide--house]" /></label><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="medium">medium</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-breadcrumb-variant" name="pg_variant"><option value="minimal" selected>minimal</option><option value="soft">soft</option><option value="outline">outline</option><option value="contrast">contrast</option></select></label><label class="playground-field" for="playground-breadcrumb-class"><span><strong>class</strong><small>string</small></span><input id="playground-breadcrumb-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-breadcrumb-active"><span><strong>active</strong><small>string</small></span><input id="playground-breadcrumb-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-breadcrumb-activeIcon"><span><strong>active Icon</strong><small>string</small></span><input id="playground-breadcrumb-activeIcon" name="pg_activeIcon" type="text" value="icon-[lucide--file-text]" /></label><label class="playground-field" for="playground-breadcrumb-separator"><span><strong>separator</strong><small>string</small></span><select id="playground-breadcrumb-separator" name="pg_separator"><option value="chevron" selected>chevron</option><option value="slash">slash</option><option value="dot">dot</option><option value="arrow">arrow</option></select></label><label class="playground-toggle" for="playground-breadcrumb-showHome"><span><strong>show Home</strong><small>boolean</small></span><input id="playground-breadcrumb-showHome" name="pg_showHome" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-breadcrumb-homeLabel"><span><strong>home Label</strong><small>string</small></span><input id="playground-breadcrumb-homeLabel" name="pg_homeLabel" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-homeHref"><span><strong>home Href</strong><small>string</small></span><input id="playground-breadcrumb-homeHref" name="pg_homeHref" type="text" value="#breadcrumb-demo" /></label><label class="playground-field" for="playground-breadcrumb-homeIcon"><span><strong>home Icon</strong><small>string</small></span><input id="playground-breadcrumb-homeIcon" name="pg_homeIcon" type="text" value="icon-[lucide--house]" /></label><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="medium">medium</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-breadcrumb-variant" name="pg_variant"><option value="minimal" selected>minimal</option><option value="soft">soft</option><option value="outline">outline</option><option value="contrast">contrast</option></select></label><label class="playground-field" for="playground-breadcrumb-class"><span><strong>class</strong><small>string</small></span><input id="playground-breadcrumb-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -279,32 +285,37 @@ page BreadcrumbDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="breadcrumb-demo-1" class="demo-canvas demo-canvas--1"> <div id="breadcrumb-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Breadcrumb label="Breadcrumb" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Breadcrumb" homeHref="#breadcrumb-demo" size="small" variant="minimal" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Breadcrumb label="Breadcrumb" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Breadcrumb" homeHref="#breadcrumb-demo" size="small" variant="minimal" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Minimal page trail usage"> <section class="demo-code" aria-label="Minimal page trail usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Breadcrumb <pre><code>page BreadcrumbExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Home", "label": "Home",
"href": "/", "href": "/",
"icon": "icon-[lucide--house]" "icon": "icon-[lucide--house]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Components", "label": "Components",
"href": "/base" "href": "/base"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Page header", "label": "Page header",
"current": true "current": true
<span>&#125;</span> <span>&#125;</span>
]' ]
showHome="true" view <span>&#123;</span>
homeLabel="Breadcrumb" &lt;Breadcrumb
homeHref="#breadcrumb-demo" items="<span>&#123;</span>items<span>&#125;</span>"
size="small" showHome="true"
/&gt;</code></pre> homeLabel="Breadcrumb"
homeHref="#breadcrumb-demo"
size="small"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -316,34 +327,39 @@ page BreadcrumbDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="breadcrumb-demo-2" class="demo-canvas demo-canvas--2"> <div id="breadcrumb-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Breadcrumb label="Compact example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Compact example" homeHref="#breadcrumb-demo" size="medium" variant="soft" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Breadcrumb label="Compact example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Compact example" homeHref="#breadcrumb-demo" size="medium" variant="soft" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Soft navigation trail usage"> <section class="demo-code" aria-label="Soft navigation trail usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Breadcrumb <pre><code>page BreadcrumbExample <span>&#123;</span>
label="Compact example" state items = [
items='[ <span>&#123;</span>
<span>&#123;</span> "label": "Home",
"label": "Home", "href": "/",
"href": "/", "icon": "icon-[lucide--house]"
"icon": "icon-[lucide--house]" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Components",
"label": "Components", "href": "/base"
"href": "/base" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Page header",
"label": "Page header", "current": true
"current": true <span>&#125;</span>
<span>&#125;</span> ]
]' view <span>&#123;</span>
showHome="true" &lt;Breadcrumb
homeLabel="Compact example" label="Compact example"
homeHref="#breadcrumb-demo" items="<span>&#123;</span>items<span>&#125;</span>"
size="medium" showHome="true"
variant="soft" homeLabel="Compact example"
/&gt;</code></pre> homeHref="#breadcrumb-demo"
size="medium"
variant="soft"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -355,35 +371,40 @@ page BreadcrumbDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="breadcrumb-demo-3" class="demo-canvas demo-canvas--3"> <div id="breadcrumb-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Breadcrumb label="Advanced example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' separator="slash" showHome="true" homeLabel="Advanced example" homeHref="#breadcrumb-demo" size="large" variant="outline" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Breadcrumb label="Advanced example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' separator="slash" showHome="true" homeLabel="Advanced example" homeHref="#breadcrumb-demo" size="large" variant="outline" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Large directory breadcrumb usage"> <section class="demo-code" aria-label="Large directory breadcrumb usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Breadcrumb <pre><code>page BreadcrumbExample <span>&#123;</span>
label="Advanced example" state items = [
items='[ <span>&#123;</span>
<span>&#123;</span> "label": "Home",
"label": "Home", "href": "/",
"href": "/", "icon": "icon-[lucide--house]"
"icon": "icon-[lucide--house]" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Components",
"label": "Components", "href": "/base"
"href": "/base" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Page header",
"label": "Page header", "current": true
"current": true <span>&#125;</span>
<span>&#125;</span> ]
]' view <span>&#123;</span>
separator="slash" &lt;Breadcrumb
showHome="true" label="Advanced example"
homeLabel="Advanced example" items="<span>&#123;</span>items<span>&#125;</span>"
homeHref="#breadcrumb-demo" separator="slash"
size="large" showHome="true"
variant="outline" homeLabel="Advanced example"
/&gt;</code></pre> homeHref="#breadcrumb-demo"
size="large"
variant="outline"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -396,7 +417,7 @@ const component = document.querySelector("[data-ui-component=\"Breadcrumb\"], [d
if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
console.log("select", payload) console.log("select", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>"chevron"</code></td><td>No</td></tr><tr><td><code>showHome</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>homeLabel</code></td><td>string</td><td><code>"Home"</code></td><td>No</td></tr><tr><td><code>homeHref</code></td><td>string</td><td><code>"/"</code></td><td>No</td></tr><tr><td><code>homeIcon</code></td><td>string</td><td><code>"icon-[lucide--house]"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"minimal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>activeIcon</code></td><td>string</td><td><code>"icon-[lucide--file-text]"</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>"chevron"</code></td><td>No</td></tr><tr><td><code>showHome</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>homeLabel</code></td><td>string</td><td><code>"Home"</code></td><td>No</td></tr><tr><td><code>homeHref</code></td><td>string</td><td><code>"/"</code></td><td>No</td></tr><tr><td><code>homeIcon</code></td><td>string</td><td><code>"icon-[lucide--house]"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"minimal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#breadcrumb-demo-1">Minimal page trail</a><a href="#breadcrumb-demo-2">Soft navigation trail</a><a href="#breadcrumb-demo-3">Large directory breadcrumb</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#breadcrumb-demo-1">Minimal page trail</a><a href="#breadcrumb-demo-2">Soft navigation trail</a><a href="#breadcrumb-demo-3">Large directory breadcrumb</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/button-group.wrn
+114 -566
View File
@@ -1,19 +1,19 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly. // Generated by scripts/generate-showcase.mjs. Do not edit directly.
page ButtonGroupDetail { page ButtonGroupDetail {
layout = "showcase" layout = "showcase"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"button-group-0-1\",\"key\":\"button-group-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\":\"#button-group-demo\",\"actionHref\":\"#button-group-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\":\"button-group-0-2\",\"key\":\"button-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#button-group-demo\",\"actionHref\":\"#button-group-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") ?? "[{\"label\":\"Day\",\"value\":\"day\"},{\"label\":\"Week\",\"value\":\"week\"},{\"label\":\"Month\",\"value\":\"month\"}]")
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" state playground_value = ctx.url.searchParams.get("pg_value") ?? "week"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
state playground_responsive = (ctx.url.searchParams.get("pg_responsive") ?? "false") === "true" state playground_responsive = (ctx.url.searchParams.get("pg_responsive") ?? "false") === "true"
state playground_attached = (ctx.url.searchParams.get("pg_attached") ?? "true") === "true" state playground_attached = (ctx.url.searchParams.get("pg_attached") ?? "true") === "true"
state playground_selectable = (ctx.url.searchParams.get("pg_selectable") ?? "false") === "true" state playground_selectable = (ctx.url.searchParams.get("pg_selectable") ?? "true") === "true"
state playground_toolbar = (ctx.url.searchParams.get("pg_toolbar") ?? "false") === "true" state playground_toolbar = (ctx.url.searchParams.get("pg_toolbar") ?? "false") === "true"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button Group 1 example" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button group"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Button Group" title = "Button Group"
description = "Theme-aware, responsive button group component." description = "Theme-aware, responsive button group component."
@@ -39,118 +39,29 @@ page ButtonGroupDetail {
<div class="playground-preview-source" data-playground-preview><ButtonGroup items='{playground_items}' value='{playground_value}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' orientation='{playground_orientation}' responsive='{playground_responsive}' attached='{playground_attached}' selectable='{playground_selectable}' toolbar='{playground_toolbar}' disabled='{playground_disabled}' ariaLabel='{playground_ariaLabel}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><ButtonGroup items='{playground_items}' value='{playground_value}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' orientation='{playground_orientation}' responsive='{playground_responsive}' attached='{playground_attached}' selectable='{playground_selectable}' toolbar='{playground_toolbar}' disabled='{playground_disabled}' ariaLabel='{playground_ariaLabel}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;ButtonGroup <pre><code data-playground-code>page ButtonGroupExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "button-group-0-1", "label": "Day",
"key": "button-group-0-1", "value": "day"
"value": "primary", <span>&#125;</span>,
"label": "Primary workflow", <span>&#123;</span>
"title": "Primary workflow", "label": "Week",
"description": "A clean default configuration for everyday product interfaces.", "value": "week"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#button-group-demo", <span>&#123;</span>
"actionHref": "#button-group-demo", "label": "Month",
"actionLabel": "View details", "value": "month"
"icon": "icon-[lucide--sparkles]", <span>&#125;</span>
"iconClass": "icon-[lucide--sparkles]", ]
"variant": "primary", view <span>&#123;</span>
"status": "Active", &lt;ButtonGroup
"time": "09:30", items="<span>&#123;</span>items<span>&#125;</span>"
"current": true, value="week"
"selected": true, selectable="true"
"checked": true, /&gt;
"disabled": false, <span>&#125;</span>
"outgoing": false, <span>&#125;</span></code></pre>
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "button-group-0-2",
"key": "button-group-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#button-group-demo",
"actionHref": "#button-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
value="sample-1"
ariaLabel="Button Group 1 example"
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -159,112 +70,18 @@ page ButtonGroupDetail {
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-button-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-button-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "button-group-0-1", "label": "Day",
"key": "button-group-0-1", "value": "day"
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#button-group-demo",
"actionHref": "#button-group-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;, &#125;,
&#123; &#123;
"id": "button-group-0-2", "label": "Week",
"key": "button-group-0-2", "value": "week"
"value": "secondary", &#125;,
"label": "Additional option", &#123;
"title": "Supporting example", "label": "Month",
"description": "A clean default configuration for everyday product interfaces.", "value": "month"
"text": "Another configurable message.",
"href": "#button-group-demo",
"actionHref": "#button-group-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-group-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-button-group-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-button-group-responsive"><span><strong>responsive</strong><small>boolean</small></span><input id="playground-button-group-responsive" name="pg_responsive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-attached"><span><strong>attached</strong><small>boolean</small></span><input id="playground-button-group-attached" name="pg_attached" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-button-group-selectable" name="pg_selectable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-button-group-toolbar" name="pg_toolbar" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-group-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-group-ariaLabel" name="pg_ariaLabel" type="text" value="Button Group 1 example" /></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="week" /></label><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-group-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-button-group-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-button-group-responsive"><span><strong>responsive</strong><small>boolean</small></span><input id="playground-button-group-responsive" name="pg_responsive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-attached"><span><strong>attached</strong><small>boolean</small></span><input id="playground-button-group-attached" name="pg_attached" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-button-group-selectable" name="pg_selectable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-button-group-toolbar" name="pg_toolbar" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-group-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-group-ariaLabel" name="pg_ariaLabel" type="text" value="Button group" /></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -279,123 +96,34 @@ page ButtonGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-group-demo-1" class="demo-canvas demo-canvas--1"> <div id="button-group-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ButtonGroup items='[{"id":"button-group-0-1","key":"button-group-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":"#button-group-demo","actionHref":"#button-group-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":"button-group-0-2","key":"button-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-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"]}]' value="sample-1" size="md" variant="default" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 1 example" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ButtonGroup <pre><code>page ButtonGroupExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "button-group-0-1", "label": "Day",
"key": "button-group-0-1", "value": "day"
"value": "primary", <span>&#125;</span>,
"label": "Primary workflow", <span>&#123;</span>
"title": "Primary workflow", "label": "Week",
"description": "A clean default configuration for everyday product interfaces.", "value": "week"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#button-group-demo", <span>&#123;</span>
"actionHref": "#button-group-demo", "label": "Month",
"actionLabel": "View details", "value": "month"
"icon": "icon-[lucide--sparkles]", <span>&#125;</span>
"iconClass": "icon-[lucide--sparkles]", ]
"variant": "primary", view <span>&#123;</span>
"status": "Active", &lt;ButtonGroup
"time": "09:30", items="<span>&#123;</span>items<span>&#125;</span>"
"current": true, value="week"
"selected": true, selectable="true"
"checked": true, /&gt;
"disabled": false, <span>&#125;</span>
"outgoing": false, <span>&#125;</span></code></pre>
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "button-group-0-2",
"key": "button-group-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#button-group-demo",
"actionHref": "#button-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
value="sample-1"
ariaLabel="Button Group 1 example"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -407,125 +135,35 @@ page ButtonGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-group-demo-2" class="demo-canvas demo-canvas--2"> <div id="button-group-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ButtonGroup items='[{"id":"button-group-1-1","key":"button-group-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":"#button-group-demo","actionHref":"#button-group-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":"button-group-1-2","key":"button-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-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"]}]' value="sample-2" size="sm" variant="secondary" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 2 example" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="sm" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ButtonGroup <pre><code>page ButtonGroupExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "button-group-1-1", "label": "Day",
"key": "button-group-1-1", "value": "day"
"value": "primary", <span>&#125;</span>,
"label": "Secondary workflow", <span>&#123;</span>
"title": "Secondary workflow", "label": "Week",
"description": "A compact configuration designed for dense application layouts.", "value": "week"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#button-group-demo", <span>&#123;</span>
"actionHref": "#button-group-demo", "label": "Month",
"actionLabel": "View details", "value": "month"
"icon": "icon-[lucide--zap]", <span>&#125;</span>
"iconClass": "icon-[lucide--zap]", ]
"variant": "secondary", view <span>&#123;</span>
"status": "Active", &lt;ButtonGroup
"time": "10:15", items="<span>&#123;</span>items<span>&#125;</span>"
"current": true, value="week"
"selected": true, size="sm"
"checked": true, selectable="true"
"disabled": false, /&gt;
"outgoing": false, <span>&#125;</span>
"open": true, <span>&#125;</span></code></pre>
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "button-group-1-2",
"key": "button-group-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#button-group-demo",
"actionHref": "#button-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
value="sample-2"
size="sm"
variant="secondary"
ariaLabel="Button Group 2 example"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -537,125 +175,35 @@ page ButtonGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-group-demo-3" class="demo-canvas demo-canvas--3"> <div id="button-group-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ButtonGroup items='[{"id":"button-group-2-1","key":"button-group-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":"#button-group-demo","actionHref":"#button-group-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":"button-group-2-2","key":"button-group-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":"#button-group-demo","actionHref":"#button-group-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"]}]' value="sample-3" size="lg" variant="success" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 3 example" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="false" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ButtonGroup <pre><code>page ButtonGroupExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "button-group-2-1", "label": "Day",
"key": "button-group-2-1", "value": "day"
"value": "primary", <span>&#125;</span>,
"label": "Advanced workflow", <span>&#123;</span>
"title": "Advanced workflow", "label": "Week",
"description": "A richer configuration with more supporting information and actions.", "value": "week"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#button-group-demo", <span>&#123;</span>
"actionHref": "#button-group-demo", "label": "Month",
"actionLabel": "Explore workflow", "value": "month"
"icon": "icon-[lucide--circle-check]", <span>&#125;</span>
"iconClass": "icon-[lucide--circle-check]", ]
"variant": "success", view <span>&#123;</span>
"status": "Complete", &lt;ButtonGroup
"time": "11:45", items="<span>&#123;</span>items<span>&#125;</span>"
"current": true, value="week"
"selected": true, attached="false"
"checked": true, selectable="true"
"disabled": false, /&gt;
"outgoing": false, <span>&#125;</span>
"open": true, <span>&#125;</span></code></pre>
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "button-group-2-2",
"key": "button-group-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": "#button-group-demo",
"actionHref": "#button-group-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
value="sample-3"
size="lg"
variant="success"
ariaLabel="Button Group 3 example"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/button.wrn
+14 -13
View File
@@ -23,6 +23,7 @@ page ButtonDetail {
state playground_ariaExpanded = ctx.url.searchParams.get("pg_ariaExpanded") ?? "" state playground_ariaExpanded = ctx.url.searchParams.get("pg_ariaExpanded") ?? ""
state playground_ariaControls = ctx.url.searchParams.get("pg_ariaControls") ?? "" state playground_ariaControls = ctx.url.searchParams.get("pg_ariaControls") ?? ""
state playground_title = ctx.url.searchParams.get("pg_title") ?? "" state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
state playground_tooltipPlacement = ctx.url.searchParams.get("pg_tooltipPlacement") ?? "top"
state playground_autofocus = (ctx.url.searchParams.get("pg_autofocus") ?? "false") === "true" state playground_autofocus = (ctx.url.searchParams.get("pg_autofocus") ?? "false") === "true"
state playground_controlClass = ctx.url.searchParams.get("pg_controlClass") ?? "" state playground_controlClass = ctx.url.searchParams.get("pg_controlClass") ?? ""
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -39,7 +40,7 @@ page ButtonDetail {
<span class="showcase-eyebrow">Base component</span> <span class="showcase-eyebrow">Base component</span>
<h1>Button</h1> <h1>Button</h1>
<p>Theme-aware, responsive button component.</p> <p>Theme-aware, responsive button component.</p>
<div class="detail-badges"><span>25 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>26 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -48,7 +49,7 @@ page ButtonDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Button label='{playground_label}' loadingLabel='{playground_loadingLabel}' description='{playground_description}' as='{playground_as}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' type='{playground_type}' variant='{playground_variant}' color='{playground_color}' size='{playground_size}' disabled='{playground_disabled}' loading='{playground_loading}' pill='{playground_pill}' fullWidth='{playground_fullWidth}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' ariaLabel='{playground_ariaLabel}' ariaPressed='{playground_ariaPressed}' ariaExpanded='{playground_ariaExpanded}' ariaControls='{playground_ariaControls}' title='{playground_title}' autofocus='{playground_autofocus}' controlClass='{playground_controlClass}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Button label='{playground_label}' loadingLabel='{playground_loadingLabel}' description='{playground_description}' as='{playground_as}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' type='{playground_type}' variant='{playground_variant}' color='{playground_color}' size='{playground_size}' disabled='{playground_disabled}' loading='{playground_loading}' pill='{playground_pill}' fullWidth='{playground_fullWidth}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' ariaLabel='{playground_ariaLabel}' ariaPressed='{playground_ariaPressed}' ariaExpanded='{playground_ariaExpanded}' ariaControls='{playground_ariaControls}' title='{playground_title}' tooltipPlacement='{playground_tooltipPlacement}' autofocus='{playground_autofocus}' controlClass='{playground_controlClass}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Button <pre><code data-playground-code>&lt;Button
@@ -61,8 +62,8 @@ page ButtonDetail {
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-button-label"><span><strong>label</strong><small>string</small></span><input id="playground-button-label" name="pg_label" type="text" value="Save &amp; Submit" /></label><label class="playground-field" for="playground-button-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-button-loadingLabel" name="pg_loadingLabel" type="text" value="Loading…" /></label><label class="playground-field" for="playground-button-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-button-as"><span><strong>as</strong><small>string</small></span><select id="playground-button-as" name="pg_as"><option value="button" selected>button</option><option value="">Auto / default</option><option value="a">a</option></select></label><label class="playground-field" for="playground-button-href"><span><strong>href</strong><small>string</small></span><input id="playground-button-href" name="pg_href" type="text" value="" /></label><label class="playground-field" for="playground-button-target"><span><strong>target</strong><small>string</small></span><select id="playground-button-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-button-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-button-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-button-type"><span><strong>type</strong><small>string</small></span><select id="playground-button-type" name="pg_type"><option value="submit" selected>submit</option><option value="button">button</option><option value="reset">reset</option></select></label><label class="playground-field" for="playground-button-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-toggle" for="playground-button-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-button-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-pill"><span><strong>pill</strong><small>boolean</small></span><input id="playground-button-pill" name="pg_pill" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-button-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-button-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-button-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-button-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-button-ariaLabel"><span><strLine truncated <div class="playground-fields"><label class="playground-field" for="playground-button-label"><span><strong>label</strong><small>string</small></span><input id="playground-button-label" name="pg_label" type="text" value="Save &amp; Submit" /></label><label class="playground-field" for="playground-button-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-button-loadingLabel" name="pg_loadingLabel" type="text" value="Loading…" /></label><label class="playground-field" for="playground-button-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-button-as"><span><strong>as</strong><small>string</small></span><select id="playground-button-as" name="pg_as"><option value="button" selected>button</option><option value="">Auto / default</option><option value="a">a</option></select></label><label class="playground-field" for="playground-button-href"><span><strong>href</strong><small>string</small></span><input id="playground-button-href" name="pg_href" type="text" value="" /></label><label class="playground-field" for="playground-button-target"><span><strong>target</strong><small>string</small></span><select id="playground-button-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-button-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-button-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-button-type"><span><strong>type</strong><small>string</small></span><select id="playground-button-type" name="pg_type"><option value="submit" selected>submit</option><option value="button">button</option><option value="reset">reset</option></select></label><label class="playground-field" for="playground-button-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-toggle" for="playground-button-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-button-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-pill"><span><strong>pill</strong><small>boolean</small></span><input id="playground-button-pill" name="pg_pill" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-button-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-button-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-button-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-button-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-button-ariaLabel"><span><strLine truncated
</form> </form>
</div> </div>
</section> </section>
@@ -77,7 +78,7 @@ page ButtonDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-demo-1" class="demo-canvas demo-canvas--1"> <div id="button-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Button label="Save &amp; Submit" as="button" type="submit" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Button label="Save &amp; Submit" as="button" type="submit" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Primary action usage"> <section class="demo-code" aria-label="Primary action usage">
@@ -98,7 +99,7 @@ page ButtonDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-demo-2" class="demo-canvas demo-canvas--2"> <div id="button-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Button label="Learn more" as="a" href="#button-demo" variant="outline" size="sm" icon="icon-[lucide--arrow-right]" iconPosition="end" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Button label="Learn more" as="a" href="#button-demo" variant="outline" size="sm" icon="icon-[lucide--arrow-right]" iconPosition="end" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Secondary navigation usage"> <section class="demo-code" aria-label="Secondary navigation usage">
@@ -123,7 +124,7 @@ page ButtonDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-demo-3" class="demo-canvas demo-canvas--3"> <div id="button-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Button label="Upgrade plan" as="button" variant="secondary" size="lg" pill="true" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Button label="Upgrade plan" as="button" variant="secondary" size="lg" pill="true" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Prominent rounded action usage"> <section class="demo-code" aria-label="Prominent rounded action usage">
@@ -146,7 +147,7 @@ page ButtonDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-demo-4" class="demo-canvas demo-canvas--4"> <div id="button-demo-4" class="demo-canvas demo-canvas--4">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Button label="Open settings" as="button" variant="ghost" size="icon" icon="icon-[lucide--settings]" ariaLabel="Open settings" class="showcase-instance showcase-instance--4" /></div> <div class="demo-render"><Button label="Open settings" as="button" variant="ghost" size="icon" icon="icon-[lucide--settings]" ariaLabel="Open settings" class="showcase-instance showcase-instance--4" /></div>
</div> </div>
<section class="demo-code" aria-label="Accessible icon action usage"> <section class="demo-code" aria-label="Accessible icon action usage">
@@ -170,7 +171,7 @@ page ButtonDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-demo-5" class="demo-canvas demo-canvas--5"> <div id="button-demo-5" class="demo-canvas demo-canvas--5">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Button label="Delete project" as="button" variant="destructive" icon="icon-[lucide--trash-2]" class="showcase-instance showcase-instance--5" /></div> <div class="demo-render"><Button label="Delete project" as="button" variant="destructive" icon="icon-[lucide--trash-2]" class="showcase-instance showcase-instance--5" /></div>
</div> </div>
<section class="demo-code" aria-label="Dangerous action usage"> <section class="demo-code" aria-label="Dangerous action usage">
@@ -192,7 +193,7 @@ page ButtonDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-demo-6" class="demo-canvas demo-canvas--6"> <div id="button-demo-6" class="demo-canvas demo-canvas--6">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Button label="Read documentation" as="a" href="#button-demo" variant="link" class="showcase-instance showcase-instance--6" /></div> <div class="demo-render"><Button label="Read documentation" as="a" href="#button-demo" variant="link" class="showcase-instance showcase-instance--6" /></div>
</div> </div>
<section class="demo-code" aria-label="Inline action usage"> <section class="demo-code" aria-label="Inline action usage">
@@ -214,7 +215,7 @@ page ButtonDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-demo-7" class="demo-canvas demo-canvas--7"> <div id="button-demo-7" class="demo-canvas demo-canvas--7">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Button label="Publish" loadingLabel="Publishing…" as="button" loading="true" class="showcase-instance showcase-instance--7" /></div> <div class="demo-render"><Button label="Publish" loadingLabel="Publishing…" as="button" loading="true" class="showcase-instance showcase-instance--7" /></div>
</div> </div>
<section class="demo-code" aria-label="Pending action usage"> <section class="demo-code" aria-label="Pending action usage">
@@ -236,7 +237,7 @@ page ButtonDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="button-demo-8" class="demo-canvas demo-canvas--8"> <div id="button-demo-8" class="demo-canvas demo-canvas--8">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Button label="Unavailable action" as="button" variant="outline" disabled="true" class="showcase-instance showcase-instance--8" /></div> <div class="demo-render"><Button label="Unavailable action" as="button" variant="outline" disabled="true" class="showcase-instance showcase-instance--8" /></div>
</div> </div>
<section class="demo-code" aria-label="Unavailable action usage"> <section class="demo-code" aria-label="Unavailable action usage">
@@ -269,7 +270,7 @@ if (component) registerOutputHandler(component, "focus", (payload) =&gt; <span>&
if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#123;</span>
console.log("blur", payload) console.log("blur", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Button"</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading…"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>as</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>pill</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaPressed</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaExpanded</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaControls</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>autofocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controlClass</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Button"</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading…"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>as</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>pill</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaPressed</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaExpanded</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaControls</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tooltipPlacement</code></td><td>string</td><td><code>"top"</code></td><td>No</td></tr><tr><td><code>autofocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controlClass</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-demo-1">Primary action</a><a href="#button-demo-2">Secondary navigation</a><a href="#button-demo-3">Prominent rounded action</a><a href="#button-demo-4">Accessible icon action</a><a href="#button-demo-5">Dangerous action</a><a href="#button-demo-6">Inline action</a><a href="#button-demo-7">Pending action</a><a href="#button-demo-8">Unavailable action</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-demo-1">Primary action</a><a href="#button-demo-2">Secondary navigation</a><a href="#button-demo-3">Prominent rounded action</a><a href="#button-demo-4">Accessible icon action</a><a href="#button-demo-5">Dangerous action</a><a href="#button-demo-6">Inline action</a><a href="#button-demo-7">Pending action</a><a href="#button-demo-8">Unavailable action</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/card.wrn
+273 -1705
View File
File diff suppressed because it is too large. Load diff
app/pages/components/carousel.wrn
+146 -590
View File
@@ -3,9 +3,9 @@ page CarouselDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Carousel example" state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default carousel for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"carousel-0-1\",\"key\":\"carousel-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\":\"#carousel-demo\",\"actionHref\":\"#carousel-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\":\"carousel-0-2\",\"key\":\"carousel-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#carousel-demo\",\"actionHref\":\"#carousel-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") ?? "[{\"title\":\"A space to create\",\"description\":\"Bring your next idea to life.\",\"imageSrc\":\"/showcase-images/green-hero.svg\"},{\"title\":\"Made for teamwork\",\"description\":\"Keep everyone moving together.\",\"imageSrc\":\"/showcase-images/blue-mountain.svg\"},{\"title\":\"Room to grow\",\"description\":\"Build something that matters.\",\"imageSrc\":\"/showcase-images/violet-circle.svg\"}]")
state playground_activeIndex = Number(ctx.url.searchParams.get("pg_activeIndex") ?? "0") state playground_activeIndex = Number(ctx.url.searchParams.get("pg_activeIndex") ?? "0")
state playground_slidesPerView = Number(ctx.url.searchParams.get("pg_slidesPerView") ?? "1") state playground_slidesPerView = Number(ctx.url.searchParams.get("pg_slidesPerView") ?? "1")
state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "0.75rem" state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "0.75rem"
@@ -20,9 +20,10 @@ page CarouselDetail {
state playground_isSnap = (ctx.url.searchParams.get("pg_isSnap") ?? "false") === "true" state playground_isSnap = (ctx.url.searchParams.get("pg_isSnap") ?? "false") === "true"
state playground_showCounter = (ctx.url.searchParams.get("pg_showCounter") ?? "true") === "true" state playground_showCounter = (ctx.url.searchParams.get("pg_showCounter") ?? "true") === "true"
state playground_thumbnails = ctx.url.searchParams.get("pg_thumbnails") ?? "none" state playground_thumbnails = ctx.url.searchParams.get("pg_thumbnails") ?? "none"
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Carousel 1 example" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Product highlights"
state playground_framed = (ctx.url.searchParams.get("pg_framed") ?? "false") === "true"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" 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_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Carousel" title = "Carousel"
description = "Theme-aware, responsive carousel component." description = "Theme-aware, responsive carousel component."
@@ -36,7 +37,7 @@ page CarouselDetail {
<span class="showcase-eyebrow">Base component</span> <span class="showcase-eyebrow">Base component</span>
<h1>Carousel</h1> <h1>Carousel</h1>
<p>Theme-aware, responsive carousel component.</p> <p>Theme-aware, responsive carousel component.</p>
<div class="detail-badges"><span>22 props</span><span>1 slots</span><span>10 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>23 props</span><span>1 slots</span><span>10 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -45,238 +46,59 @@ page CarouselDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Carousel size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' activeIndex='{playground_activeIndex}' slidesPerView='{playground_slidesPerView}' gap='{playground_gap}' showPagination='{playground_showPagination}' isAutoPlay='{playground_isAutoPlay}' autoplayInterval='{playground_autoplayInterval}' isInfiniteLoop='{playground_isInfiniteLoop}' isRTL='{playground_isRTL}' isCentered='{playground_isCentered}' isDraggable='{playground_isDraggable}' isAutoHeight='{playground_isAutoHeight}' isSnap='{playground_isSnap}' showCounter='{playground_showCounter}' thumbnails='{playground_thumbnails}' ariaLabel='{playground_ariaLabel}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Carousel size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' activeIndex='{playground_activeIndex}' slidesPerView='{playground_slidesPerView}' gap='{playground_gap}' showPagination='{playground_showPagination}' isAutoPlay='{playground_isAutoPlay}' autoplayInterval='{playground_autoplayInterval}' isInfiniteLoop='{playground_isInfiniteLoop}' isRTL='{playground_isRTL}' isCentered='{playground_isCentered}' isDraggable='{playground_isDraggable}' isAutoHeight='{playground_isAutoHeight}' isSnap='{playground_isSnap}' showCounter='{playground_showCounter}' thumbnails='{playground_thumbnails}' ariaLabel='{playground_ariaLabel}' framed='{playground_framed}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Carousel <pre><code data-playground-code>page CarouselExample <span>&#123;</span>
title="Carousel example" state items = [
description="A polished default carousel for a modern application." <span>&#123;</span>
items='[ "title": "A space to create",
<span>&#123;</span> "description": "Bring your next idea to life.",
"id": "carousel-0-1", "imageSrc": "/showcase-images/green-hero.svg"
"key": "carousel-0-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Primary workflow", "title": "Made for teamwork",
"title": "Primary workflow", "description": "Keep everyone moving together.",
"description": "A clean default configuration for everyday product interfaces.", "imageSrc": "/showcase-images/blue-mountain.svg"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#carousel-demo", <span>&#123;</span>
"actionHref": "#carousel-demo", "title": "Room to grow",
"actionLabel": "View details", "description": "Build something that matters.",
"icon": "icon-[lucide--sparkles]", "imageSrc": "/showcase-images/violet-circle.svg"
"iconClass": "icon-[lucide--sparkles]", <span>&#125;</span>
"variant": "primary", ]
"status": "Active", view <span>&#123;</span>
"time": "09:30", &lt;Carousel
"current": true, items="<span>&#123;</span>items<span>&#125;</span>"
"selected": true, showPagination="true"
"checked": true, showCounter="true"
"disabled": false, ariaLabel="Product highlights"
"outgoing": false, /&gt;
"open": true, <span>&#125;</span>
"number": 1, <span>&#125;</span></code></pre>
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "carousel-0-2",
"key": "carousel-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
showPagination="true"
showCounter="true"
ariaLabel="Carousel 1 example"
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-carousel-size"><span><strong>size</strong><small>string</small></span><select id="playground-carousel-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-carousel-color"><span><strong>color</strong><small>string</small></span><select id="playground-carousel-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-carousel-title"><span><strong>title</strong><small>string</small></span><input id="playground-carousel-title" name="pg_title" type="text" value="Carousel example" /></label><label class="playground-field" for="playground-carousel-description"><span><strong>description</strong><small>string</small></span><input id="playground-carousel-description" name="pg_description" type="text" value="A polished default carousel for a modern application." /></label><label class="playground-field" for="playground-carousel-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-carousel-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-carousel-size"><span><strong>size</strong><small>string</small></span><select id="playground-carousel-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-carousel-color"><span><strong>color</strong><small>string</small></span><select id="playground-carousel-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-carousel-title"><span><strong>title</strong><small>string</small></span><input id="playground-carousel-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-carousel-description"><span><strong>description</strong><small>string</small></span><input id="playground-carousel-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-carousel-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-carousel-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "carousel-0-1", "title": "A space to create",
"key": "carousel-0-1", "description": "Bring your next idea to life.",
"value": "primary", "imageSrc": "/showcase-images/green-hero.svg"
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#carousel-demo",
"actionHref": "#carousel-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;, &#125;,
&#123; &#123;
"id": "carousel-0-2", "title": "Made for teamwork",
"key": "carousel-0-2", "description": "Keep everyone moving together.",
"value": "secondary", "imageSrc": "/showcase-images/blue-mountain.svg"
"label": "Additional option", &#125;,
"title": "Supporting example", &#123;
"description": "A clean default configuration for everyday product interfaces.", "title": "Room to grow",
"text": "Another configurable message.", "description": "Build something that matters.",
"href": "#carousel-demo", "imageSrc": "/showcase-images/violet-circle.svg"
"actionHref": "#carousel-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-carousel-activeIndex"><span><strong>active Index</strong><small>number</small></span><input id="playground-carousel-activeIndex" name="pg_activeIndex" type="number" value="0" /></label><label class="playground-field" for="playground-carousel-slidesPerView"><span><strong>slides Per View</strong><small>number</small></span><input id="playground-carousel-slidesPerView" name="pg_slidesPerView" type="number" value="1" /></label><label class="playground-field" for="playground-carousel-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-carousel-gap" name="pg_gap"><option value="0.75rem" selected>0.75rem</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-carousel-showPagination"><span><strong>show Pagination</strong><small>boolean</small></span><input id="playground-carousel-showPagination" name="pg_showPagination" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoPlay"><span><strong>is Auto Play</strong><small>boolean</small></span><input id="playground-carousel-isAutoPlay" name="pg_isAutoPlay" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-autoplayInterval"><span><strong>autoplay Interval</strong><small>number</small></span><input id="playground-carousel-autoplayInterval" name="pg_autoplayInterval" type="number" value="4000" /></label><label class="playground-toggle" for="playground-carousel-isInfiniteLoop"><span><strong>is Infinite Loop</strong><small>boolean</small></span><input id="playground-carousel-isInfiniteLoop" name="pg_isInfiniteLoop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isRTL"><span><strong>is RTL</strong><small>boolean</small></span><input id="playground-carousel-isRTL" name="pg_isRTL" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isCentered"><span><strong>is Centered</strong><small>boolean</small></span><input id="playground-carousel-isCentered" name="pg_isCentered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isDraggable"><span><strong>is Draggable</strong><small>boolean</small></span><input id="playground-carousel-isDraggable" name="pg_isDraggable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoHeight"><span><strong>is Auto Height</strong><small>boolean</small></span><input id="playground-carousel-isAutoHeight" name="pg_isAutoHeight" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isSnap"><span><strong>is Snap</strong><small>boolean</small></span><input id="playground-carousel-isSnap" name="pg_isSnap" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-carousel-showCounter" name="pg_showCounter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-thumbnails"><span><strong>thumbnails</strong><small>string</small></span><input id="playground-carousel-thumbnails" name="pg_thumbnails" type="text" value="none" /></label><label class="playground-field" for="playground-carousel-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-carousel-ariaLabel" name="pg_ariaLabel" type="text" value="Carousel 1 example" /></label><label class="playground-field" for="playground-carousel-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-carousel-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-carousel-class"><span><strong>class</strong><small>string</small></span><input id="playground-carousel-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-carousel-activeIndex"><span><strong>active Index</strong><small>number</small></span><input id="playground-carousel-activeIndex" name="pg_activeIndex" type="number" value="0" /></label><label class="playground-field" for="playground-carousel-slidesPerView"><span><strong>slides Per View</strong><small>number</small></span><input id="playground-carousel-slidesPerView" name="pg_slidesPerView" type="number" value="1" /></label><label class="playground-field" for="playground-carousel-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-carousel-gap" name="pg_gap"><option value="0.75rem" selected>0.75rem</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-carousel-showPagination"><span><strong>show Pagination</strong><small>boolean</small></span><input id="playground-carousel-showPagination" name="pg_showPagination" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoPlay"><span><strong>is Auto Play</strong><small>boolean</small></span><input id="playground-carousel-isAutoPlay" name="pg_isAutoPlay" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-autoplayInterval"><span><strong>autoplay Interval</strong><small>number</small></span><input id="playground-carousel-autoplayInterval" name="pg_autoplayInterval" type="number" value="4000" /></label><label class="playground-toggle" for="playground-carousel-isInfiniteLoop"><span><strong>is Infinite Loop</strong><small>boolean</small></span><input id="playground-carousel-isInfiniteLoop" name="pg_isInfiniteLoop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isRTL"><span><strong>is RTL</strong><small>boolean</small></span><input id="playground-carousel-isRTL" name="pg_isRTL" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isCentered"><span><strong>is Centered</strong><small>boolean</small></span><input id="playground-carousel-isCentered" name="pg_isCentered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isDraggable"><span><strong>is Draggable</strong><small>boolean</small></span><input id="playground-carousel-isDraggable" name="pg_isDraggable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoHeight"><span><strong>is Auto Height</strong><small>boolean</small></span><input id="playground-carousel-isAutoHeight" name="pg_isAutoHeight" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isSnap"><span><strong>is Snap</strong><small>boolean</small></span><input id="playground-carousel-isSnap" name="pg_isSnap" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-carousel-showCounter" name="pg_showCounter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-thumbnails"><span><strong>thumbnails</strong><small>string</small></span><input id="playground-carousel-thumbnails" name="pg_thumbnails" type="text" value="none" /></label><label class="playground-field" for="playground-carousel-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-carousel-ariaLabel" name="pg_ariaLabel" type="text" value="Product highlights" /></label><label class="playground-toggle" for="playground-carousel-framed"><span><strong>framed</strong><small>boolean</small></span><input id="playground-carousel-framed" name="pg_framed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-carousel-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-carousel-class"><span><strong>class</strong><small>string</small></span><input id="playground-carousel-class" name="pg_class" type="text" value="" /></label>Line truncated
</form> </form>
</div> </div>
</section> </section>
@@ -285,398 +107,132 @@ page CarouselDetail {
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list"> <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div> <div><span class="demo-case-eyebrow">Recommended</span><h2>Full-width, unframed</h2><p>An edge-to-edge carousel without a card, border, or outer padding.</p></div>
<span class="demo-case-number">01</span> <span class="demo-case-number">01</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="carousel-demo-1" class="demo-canvas demo-canvas--1"> <div id="carousel-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Carousel size="default" title="Carousel example" description="A polished default carousel for a modern application." items='[{"id":"carousel-0-1","key":"carousel-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":"#carousel-demo","actionHref":"#carousel-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":"carousel-0-2","key":"carousel-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-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"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Full-width, unframed usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Carousel <pre><code>page CarouselExample <span>&#123;</span>
title="Carousel example" state items = [
description="A polished default carousel for a modern application." <span>&#123;</span>
items='[ "title": "A space to create",
<span>&#123;</span> "description": "Bring your next idea to life.",
"id": "carousel-0-1", "imageSrc": "/showcase-images/green-hero.svg"
"key": "carousel-0-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Primary workflow", "title": "Made for teamwork",
"title": "Primary workflow", "description": "Keep everyone moving together.",
"description": "A clean default configuration for everyday product interfaces.", "imageSrc": "/showcase-images/blue-mountain.svg"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#carousel-demo", <span>&#123;</span>
"actionHref": "#carousel-demo", "title": "Room to grow",
"actionLabel": "View details", "description": "Build something that matters.",
"icon": "icon-[lucide--sparkles]", "imageSrc": "/showcase-images/violet-circle.svg"
"iconClass": "icon-[lucide--sparkles]", <span>&#125;</span>
"variant": "primary", ]
"status": "Active", view <span>&#123;</span>
"time": "09:30", &lt;Carousel
"current": true, items="<span>&#123;</span>items<span>&#125;</span>"
"selected": true, showPagination="true"
"checked": true, showCounter="true"
"disabled": false, ariaLabel="Product highlights"
"outgoing": false, /&gt;
"open": true, <span>&#125;</span>
"number": 1, <span>&#125;</span></code></pre>
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "carousel-0-2",
"key": "carousel-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
showPagination="true"
showCounter="true"
ariaLabel="Carousel 1 example"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div> <div><span class="demo-case-eyebrow">Compact</span><h2>Framed gallery</h2><p>Opt into a contained gallery when the surrounding layout needs it.</p></div>
<span class="demo-case-number">02</span> <span class="demo-case-number">02</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="carousel-demo-2" class="demo-canvas demo-canvas--2"> <div id="carousel-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Carousel size="sm" title="Compact Carousel" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"carousel-1-1","key":"carousel-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":"#carousel-demo","actionHref":"#carousel-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":"carousel-1-2","key":"carousel-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-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"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 2 example" variant="secondary" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="true" variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Framed gallery usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Carousel <pre><code>page CarouselExample <span>&#123;</span>
size="sm" state items = [
title="Compact Carousel" <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." "title": "A space to create",
items='[ "description": "Bring your next idea to life.",
<span>&#123;</span> "imageSrc": "/showcase-images/green-hero.svg"
"id": "carousel-1-1", <span>&#125;</span>,
"key": "carousel-1-1", <span>&#123;</span>
"value": "primary", "title": "Made for teamwork",
"label": "Secondary workflow", "description": "Keep everyone moving together.",
"title": "Secondary workflow", "imageSrc": "/showcase-images/blue-mountain.svg"
"description": "A compact configuration designed for dense application layouts.", <span>&#125;</span>,
"text": "A configurable sample message.", <span>&#123;</span>
"href": "#carousel-demo", "title": "Room to grow",
"actionHref": "#carousel-demo", "description": "Build something that matters.",
"actionLabel": "View details", "imageSrc": "/showcase-images/violet-circle.svg"
"icon": "icon-[lucide--zap]", <span>&#125;</span>
"iconClass": "icon-[lucide--zap]", ]
"variant": "secondary", view <span>&#123;</span>
"status": "Active", &lt;Carousel
"time": "10:15", items="<span>&#123;</span>items<span>&#125;</span>"
"current": true, showPagination="true"
"selected": true, showCounter="true"
"checked": true, ariaLabel="Product highlights"
"disabled": false, framed="true"
"outgoing": false, /&gt;
"open": true, <span>&#125;</span>
"number": 1, <span>&#125;</span></code></pre>
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "carousel-1-2",
"key": "carousel-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
showPagination="true"
showCounter="true"
ariaLabel="Carousel 2 example"
variant="secondary"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div> <div><span class="demo-case-eyebrow">Advanced</span><h2>Draggable slides</h2><p>Move between slides with dragging, arrows, or pagination.</p></div>
<span class="demo-case-number">03</span> <span class="demo-case-number">03</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="carousel-demo-3" class="demo-canvas demo-canvas--3"> <div id="carousel-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Carousel size="lg" title="Advanced Carousel" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"carousel-2-1","key":"carousel-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":"#carousel-demo","actionHref":"#carousel-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":"carousel-2-2","key":"carousel-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":"#carousel-demo","actionHref":"#carousel-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"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 3 example" variant="success" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="true" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Draggable slides usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Carousel <pre><code>page CarouselExample <span>&#123;</span>
size="lg" state items = [
title="Advanced Carousel" <span>&#123;</span>
description="A richer configuration demonstrating additional content and hierarchy." "title": "A space to create",
items='[ "description": "Bring your next idea to life.",
<span>&#123;</span> "imageSrc": "/showcase-images/green-hero.svg"
"id": "carousel-2-1", <span>&#125;</span>,
"key": "carousel-2-1", <span>&#123;</span>
"value": "primary", "title": "Made for teamwork",
"label": "Advanced workflow", "description": "Keep everyone moving together.",
"title": "Advanced workflow", "imageSrc": "/showcase-images/blue-mountain.svg"
"description": "A richer configuration with more supporting information and actions.", <span>&#125;</span>,
"text": "A configurable sample message.", <span>&#123;</span>
"href": "#carousel-demo", "title": "Room to grow",
"actionHref": "#carousel-demo", "description": "Build something that matters.",
"actionLabel": "Explore workflow", "imageSrc": "/showcase-images/violet-circle.svg"
"icon": "icon-[lucide--circle-check]", <span>&#125;</span>
"iconClass": "icon-[lucide--circle-check]", ]
"variant": "success", view <span>&#123;</span>
"status": "Complete", &lt;Carousel
"time": "11:45", items="<span>&#123;</span>items<span>&#125;</span>"
"current": true, showPagination="true"
"selected": true, isDraggable="true"
"checked": true, showCounter="true"
"disabled": false, ariaLabel="Product highlights"
"outgoing": false, /&gt;
"open": true, <span>&#125;</span>
"number": 1, <span>&#125;</span></code></pre>
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "carousel-2-2",
"key": "carousel-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": "#carousel-demo",
"actionHref": "#carousel-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
showPagination="true"
showCounter="true"
ariaLabel="Carousel 3 example"
variant="success"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -734,10 +290,10 @@ if (component) registerOutputHandler(component, "dragStart", (payload) =&gt; <sp
if (component) registerOutputHandler(component, "dragEnd", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "dragEnd", (payload) =&gt; <span>&#123;</span>
console.log("dragEnd", payload) console.log("dragEnd", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>activeIndex</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>slidesPerView</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"0.75rem"</code></td><td>No</td></tr><tr><td><code>showPagination</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoPlay</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoplayInterval</code></td><td>number</td><td><code>4000</code></td><td>No</td></tr><tr><td><code>isInfiniteLoop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isRTL</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isCentered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isDraggable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoHeight</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isSnap</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>thumbnails</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Content carousel"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>activeIndex</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>slidesPerView</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"0.75rem"</code></td><td>No</td></tr><tr><td><code>showPagination</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoPlay</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoplayInterval</code></td><td>number</td><td><code>4000</code></td><td>No</td></tr><tr><td><code>isInfiniteLoop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isRTL</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isCentered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isDraggable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoHeight</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isSnap</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>thumbnails</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Content carousel"</code></td><td>No</td></tr><tr><td><code>framed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#carousel-demo-1">Production default</a><a href="#carousel-demo-2">Compact application</a><a href="#carousel-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#carousel-demo-1">Full-width, unframed</a><a href="#carousel-demo-2">Framed gallery</a><a href="#carousel-demo-3">Draggable slides</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/chart.wrn
+142 -591
View File
@@ -1,18 +1,20 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly. // Generated by scripts/generate-showcase.mjs. Do not edit directly.
page ChartDetail { page ChartDetail {
layout = "showcase" layout = "showcase"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chart example" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Weekly activity"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chart for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? "Completed tasks this week"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"chart-0-1\",\"key\":\"chart-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#chart-demo\",\"actionHref\":\"#chart-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"chart-0-2\",\"key\":\"chart-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#chart-demo\",\"actionHref\":\"#chart-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Mon\",\"value\":24},{\"label\":\"Tue\",\"value\":38},{\"label\":\"Wed\",\"value\":29},{\"label\":\"Thu\",\"value\":52},{\"label\":\"Fri\",\"value\":45}]")
state playground_data = JSON.parse(ctx.url.searchParams.get("pg_data") ?? "[]")
state playground_type = ctx.url.searchParams.get("pg_type") ?? ""
state playground_valueKey = ctx.url.searchParams.get("pg_valueKey") ?? "value" state playground_valueKey = ctx.url.searchParams.get("pg_valueKey") ?? "value"
state playground_labelKey = ctx.url.searchParams.get("pg_labelKey") ?? "label" state playground_labelKey = ctx.url.searchParams.get("pg_labelKey") ?? "label"
state playground_height = Number(ctx.url.searchParams.get("pg_height") ?? "240") state playground_height = Number(ctx.url.searchParams.get("pg_height") ?? "220")
state playground_showLegend = (ctx.url.searchParams.get("pg_showLegend") ?? "true") === "true" state playground_showLegend = (ctx.url.searchParams.get("pg_showLegend") ?? "false") === "true"
state playground_showValues = (ctx.url.searchParams.get("pg_showValues") ?? "true") === "true" state playground_showValues = (ctx.url.searchParams.get("pg_showValues") ?? "true") === "true"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "bar" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "bar"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Chart" title = "Chart"
description = "Theme-aware, responsive chart component." description = "Theme-aware, responsive chart component."
@@ -26,7 +28,7 @@ page ChartDetail {
<span class="showcase-eyebrow">Integrations component</span> <span class="showcase-eyebrow">Integrations component</span>
<h1>Chart</h1> <h1>Chart</h1>
<p>Theme-aware, responsive chart component.</p> <p>Theme-aware, responsive chart component.</p>
<div class="detail-badges"><span>12 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>14 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -35,235 +37,72 @@ page ChartDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' data='{playground_data}' type='{playground_type}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Chart <pre><code data-playground-code>page ChartExample <span>&#123;</span>
title="Chart example" state items = [
description="A polished default chart for a modern application." <span>&#123;</span>
items='[ "label": "Mon",
<span>&#123;</span> "value": 24
"id": "chart-0-1", <span>&#125;</span>,
"key": "chart-0-1", <span>&#123;</span>
"value": "primary", "label": "Tue",
"label": "Primary workflow", "value": 38
"title": "Primary workflow", <span>&#125;</span>,
"description": "A clean default configuration for everyday product interfaces.", <span>&#123;</span>
"text": "A configurable sample message.", "label": "Wed",
"href": "#chart-demo", "value": 29
"actionHref": "#chart-demo", <span>&#125;</span>,
"actionLabel": "View details", <span>&#123;</span>
"icon": "icon-[lucide--sparkles]", "label": "Thu",
"iconClass": "icon-[lucide--sparkles]", "value": 52
"variant": "primary", <span>&#125;</span>,
"status": "Active", <span>&#123;</span>
"time": "09:30", "label": "Fri",
"current": true, "value": 45
"selected": true, <span>&#125;</span>
"checked": true, ]
"disabled": false, state data = []
"outgoing": false, view <span>&#123;</span>
"open": true, &lt;Chart
"number": 1, title="Weekly activity"
"count": 16, description="Completed tasks this week"
"percentage": 72, items="<span>&#123;</span>items<span>&#125;</span>"
"color": "#7c3aed", data="<span>&#123;</span>data<span>&#125;</span>"
"target": "_self", height="220"
"ariaLabel": "Open primary workflow 1", showLegend="false"
"items": [ /&gt;
<span>&#123;</span> <span>&#125;</span>
"label": "Nested option A", <span>&#125;</span></code></pre>
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "chart-0-2",
"key": "chart-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#chart-demo",
"actionHref": "#chart-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Chart example" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="A polished default chart for a modern application." /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Weekly activity" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="Completed tasks this week" /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "chart-0-1", "label": "Mon",
"key": "chart-0-1", "value": 24
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#chart-demo",
"actionHref": "#chart-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;, &#125;,
&#123; &#123;
"id": "chart-0-2", "label": "Tue",
"key": "chart-0-2", "value": 38
"value": "secondary", &#125;,
"label": "Additional option", &#123;
"title": "Supporting example", "label": "Wed",
"description": "A clean default configuration for everyday product interfaces.", "value": 29
"text": "Another configurable message.", &#125;,
"href": "#chart-demo", &#123;
"actionHref": "#chart-demo", "label": "Thu",
"actionLabel": "View details", "value": 52
"icon": "icon-[lucide--sparkles]", &#125;,
"iconClass": "icon-[lucide--sparkles]", &#123;
"variant": "primary", "label": "Fri",
"status": "Active", "value": 45
"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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="240" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-data"><span><strong>data</strong><small>unknown[]</small></span><textarea id="playground-chart-data" name="pg_data" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-type"><span><strong>type</strong><small>string</small></span><select id="playground-chart-type" name="pg_type"><option value="" selected>Auto / default</option><option value="bar">bar</option><option value="line">line</option></select></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="220" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -272,389 +111,101 @@ page ChartDetail {
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list"> <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div> <div><span class="demo-case-eyebrow">Recommended</span><h2>Bar chart</h2><p>Pass an array of label/value objects through data.</p></div>
<span class="demo-case-number">01</span> <span class="demo-case-number">01</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="chart-demo-1" class="demo-canvas demo-canvas--1"> <div id="chart-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Chart title="Chart example" description="A polished default chart for a modern application." items='[{"id":"chart-0-1","key":"chart-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chart-0-2","key":"chart-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' height="240" showLegend="true" showValues="true" size="default" variant="bar" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Chart title="Weekly signups" description="Completed tasks this week" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Bar chart usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Chart <pre><code>page ChartExample <span>&#123;</span>
title="Chart example" state items = []
description="A polished default chart for a modern application." state data = [
items='[ <span>&#123;</span>
<span>&#123;</span> "label": "Mon",
"id": "chart-0-1", "value": 24
"key": "chart-0-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Primary workflow", "label": "Tue",
"title": "Primary workflow", "value": 38
"description": "A clean default configuration for everyday product interfaces.", <span>&#125;</span>,
"text": "A configurable sample message.", <span>&#123;</span>
"href": "#chart-demo", "label": "Wed",
"actionHref": "#chart-demo", "value": 29
"actionLabel": "View details", <span>&#125;</span>,
"icon": "icon-[lucide--sparkles]", <span>&#123;</span>
"iconClass": "icon-[lucide--sparkles]", "label": "Thu",
"variant": "primary", "value": 52
"status": "Active", <span>&#125;</span>,
"time": "09:30", <span>&#123;</span>
"current": true, "label": "Fri",
"selected": true, "value": 45
"checked": true, <span>&#125;</span>
"disabled": false, ]
"outgoing": false, view <span>&#123;</span>
"open": true, &lt;Chart
"number": 1, title="Weekly signups"
"count": 16, description="Completed tasks this week"
"percentage": 72, items="<span>&#123;</span>items<span>&#125;</span>"
"color": "#7c3aed", data="<span>&#123;</span>data<span>&#125;</span>"
"target": "_self", type="bar"
"ariaLabel": "Open primary workflow 1", height="220"
"items": [ showLegend="false"
<span>&#123;</span> /&gt;
"label": "Nested option A", <span>&#125;</span>
"value": "nested-a" <span>&#125;</span></code></pre>
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "chart-0-2",
"key": "chart-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#chart-demo",
"actionHref": "#chart-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div> <div><span class="demo-case-eyebrow">Compact</span><h2>Line chart</h2><p>Use type=line to compare a trend over time.</p></div>
<span class="demo-case-number">02</span> <span class="demo-case-number">02</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="chart-demo-2" class="demo-canvas demo-canvas--2"> <div id="chart-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Chart title="Compact Chart" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"chart-1-1","key":"chart-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":"#chart-demo","actionHref":"#chart-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":"chart-1-2","key":"chart-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#chart-demo","actionHref":"#chart-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"]}]' height="240" showLegend="true" showValues="true" size="sm" variant="secondary" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Chart title="Monthly revenue" description="Completed tasks this week" items='[]' data='[{"label":"Jan","value":20},{"label":"Feb","value":35},{"label":"Mar","value":28},{"label":"Apr","value":55}]' type="line" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Line chart usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Chart <pre><code>page ChartExample <span>&#123;</span>
title="Compact Chart" state items = []
description="A compact configuration for dashboards and dense product surfaces." state data = [
items='[ <span>&#123;</span>
<span>&#123;</span> "label": "Jan",
"id": "chart-1-1", "value": 20
"key": "chart-1-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Secondary workflow", "label": "Feb",
"title": "Secondary workflow", "value": 35
"description": "A compact configuration designed for dense application layouts.", <span>&#125;</span>,
"text": "A configurable sample message.", <span>&#123;</span>
"href": "#chart-demo", "label": "Mar",
"actionHref": "#chart-demo", "value": 28
"actionLabel": "View details", <span>&#125;</span>,
"icon": "icon-[lucide--zap]", <span>&#123;</span>
"iconClass": "icon-[lucide--zap]", "label": "Apr",
"variant": "secondary", "value": 55
"status": "Active", <span>&#125;</span>
"time": "10:15", ]
"current": true, view <span>&#123;</span>
"selected": true, &lt;Chart
"checked": true, title="Monthly revenue"
"disabled": false, description="Completed tasks this week"
"outgoing": false, items="<span>&#123;</span>items<span>&#125;</span>"
"open": true, data="<span>&#123;</span>data<span>&#125;</span>"
"number": 1, type="line"
"count": 24, height="220"
"percentage": 48, showLegend="false"
"color": "#0284c7", /&gt;
"target": "_self", <span>&#125;</span>
"ariaLabel": "Open secondary workflow 1", <span>&#125;</span></code></pre>
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "chart-1-2",
"key": "chart-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#chart-demo",
"actionHref": "#chart-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
size="sm"
variant="secondary"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="chart-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Chart title="Advanced Chart" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"chart-2-1","key":"chart-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":"#chart-demo","actionHref":"#chart-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":"chart-2-2","key":"chart-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":"#chart-demo","actionHref":"#chart-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"]}]' height="240" showLegend="true" showValues="true" size="lg" variant="success" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Chart
title="Advanced Chart"
description="A richer configuration demonstrating additional content and hierarchy."
items='[
<span>&#123;</span>
"id": "chart-2-1",
"key": "chart-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": "#chart-demo",
"actionHref": "#chart-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "chart-2-2",
"key": "chart-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": "#chart-demo",
"actionHref": "#chart-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
size="lg"
variant="success"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -677,10 +228,10 @@ if (component) registerOutputHandler(component, "dataPointClick", (payload) =&gt
if (component) registerOutputHandler(component, "legendToggle", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "legendToggle", (payload) =&gt; <span>&#123;</span>
console.log("legendToggle", payload) console.log("legendToggle", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>data</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Production default</a><a href="#chart-demo-2">Compact application</a><a href="#chart-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Bar chart</a><a href="#chart-demo-2">Line chart</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/chat-bubble.wrn
+260 -580
View File
@@ -3,15 +3,15 @@ page ChatBubbleDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chat Bubble example" state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chat bubble for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"chat-bubble-0-1\",\"key\":\"chat-bubble-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\":\"#chat-bubble-demo\",\"actionHref\":\"#chat-bubble-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\":\"chat-bubble-0-2\",\"key\":\"chat-bubble-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#chat-bubble-demo\",\"actionHref\":\"#chat-bubble-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") ?? "[{\"text\":\"Hi Maya, is the new dashboard ready to review?\",\"direction\":\"incoming\",\"timestamp\":\"10:24\"},{\"text\":\"Yes! I have shared the latest version with you.\",\"direction\":\"outgoing\",\"timestamp\":\"10:25\",\"receipt\":\"read\"},{\"text\":\"Thanks, I will take a look this afternoon.\",\"direction\":\"incoming\",\"timestamp\":\"10:26\"},{\"text\":\"Great. The release notes are attached too.\",\"direction\":\"outgoing\",\"timestamp\":\"10:27\",\"receipt\":\"delivered\"},{\"text\":\"One more screenshot coming up.\",\"direction\":\"outgoing\",\"timestamp\":\"10:28\",\"receipt\":\"sent\"},{\"text\":\"Uploading the final export now.\",\"direction\":\"outgoing\",\"timestamp\":\"10:29\",\"receipt\":\"sending\"},{\"text\":\"Here is the invoice PDF.\",\"direction\":\"outgoing\",\"timestamp\":\"10:30\",\"receipt\":\"failed\",\"status\":\"Not delivered\",\"actionLabel\":\"Retry\"}]")
state playground_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true" state playground_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true"
state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "true") === "true" state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "false") === "true"
state playground_showMetadata = (ctx.url.searchParams.get("pg_showMetadata") ?? "true") === "true" state playground_showMetadata = (ctx.url.searchParams.get("pg_showMetadata") ?? "true") === "true"
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Chat Bubble 1 example" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Conversation"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" 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_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Chat Bubble" title = "Chat Bubble"
description = "Theme-aware, responsive chat bubble component." description = "Theme-aware, responsive chat bubble component."
@@ -37,235 +37,108 @@ page ChatBubbleDetail {
<div class="playground-preview-source" data-playground-preview><ChatBubble size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' oneSided='{playground_oneSided}' showAvatars='{playground_showAvatars}' showMetadata='{playground_showMetadata}' ariaLabel='{playground_ariaLabel}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><ChatBubble size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' oneSided='{playground_oneSided}' showAvatars='{playground_showAvatars}' showMetadata='{playground_showMetadata}' ariaLabel='{playground_ariaLabel}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;ChatBubble <pre><code data-playground-code>page ChatBubbleExample <span>&#123;</span>
title="Chat Bubble example" state items = [
description="A polished default chat bubble for a modern application." <span>&#123;</span>
items='[ "text": "Hi Maya, is the new dashboard ready to review?",
<span>&#123;</span> "direction": "incoming",
"id": "chat-bubble-0-1", "timestamp": "10:24"
"key": "chat-bubble-0-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Primary workflow", "text": "Yes! I have shared the latest version with you.",
"title": "Primary workflow", "direction": "outgoing",
"description": "A clean default configuration for everyday product interfaces.", "timestamp": "10:25",
"text": "A configurable sample message.", "receipt": "read"
"href": "#chat-bubble-demo", <span>&#125;</span>,
"actionHref": "#chat-bubble-demo", <span>&#123;</span>
"actionLabel": "View details", "text": "Thanks, I will take a look this afternoon.",
"icon": "icon-[lucide--sparkles]", "direction": "incoming",
"iconClass": "icon-[lucide--sparkles]", "timestamp": "10:26"
"variant": "primary", <span>&#125;</span>,
"status": "Active", <span>&#123;</span>
"time": "09:30", "text": "Great. The release notes are attached too.",
"current": true, "direction": "outgoing",
"selected": true, "timestamp": "10:27",
"checked": true, "receipt": "delivered"
"disabled": false, <span>&#125;</span>,
"outgoing": false, <span>&#123;</span>
"open": true, "text": "One more screenshot coming up.",
"number": 1, "direction": "outgoing",
"count": 16, "timestamp": "10:28",
"percentage": 72, "receipt": "sent"
"color": "#7c3aed", <span>&#125;</span>,
"target": "_self", <span>&#123;</span>
"ariaLabel": "Open primary workflow 1", "text": "Uploading the final export now.",
"items": [ "direction": "outgoing",
<span>&#123;</span> "timestamp": "10:29",
"label": "Nested option A", "receipt": "sending"
"value": "nested-a" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "text": "Here is the invoice PDF.",
"label": "Nested option B", "direction": "outgoing",
"value": "nested-b" "timestamp": "10:30",
<span>&#125;</span> "receipt": "failed",
], "status": "Not delivered",
"links": [ "actionLabel": "Retry"
<span>&#123;</span> <span>&#125;</span>
"label": "Documentation", ]
"href": "#documentation" view <span>&#123;</span>
<span>&#125;</span>, &lt;ChatBubble
<span>&#123;</span> items="<span>&#123;</span>items<span>&#125;</span>"
"label": "API reference", showMetadata="true"
"href": "#api-reference" /&gt;
<span>&#125;</span> <span>&#125;</span>
], <span>&#125;</span></code></pre>
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "chat-bubble-0-2",
"key": "chat-bubble-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#chat-bubble-demo",
"actionHref": "#chat-bubble-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
showAvatars="true"
showMetadata="true"
ariaLabel="Chat Bubble 1 example"
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="Chat Bubble example" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="A polished default chat bubble for a modern application." /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "chat-bubble-0-1", "text": "Hi Maya, is the new dashboard ready to review?",
"key": "chat-bubble-0-1", "direction": "incoming",
"value": "primary", "timestamp": "10:24"
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#chat-bubble-demo",
"actionHref": "#chat-bubble-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;, &#125;,
&#123; &#123;
"id": "chat-bubble-0-2", "text": "Yes! I have shared the latest version with you.",
"key": "chat-bubble-0-2", "direction": "outgoing",
"value": "secondary", "timestamp": "10:25",
"label": "Additional option", "receipt": "read"
"title": "Supporting example", &#125;,
"description": "A clean default configuration for everyday product interfaces.", &#123;
"text": "Another configurable message.", "text": "Thanks, I will take a look this afternoon.",
"href": "#chat-bubble-demo", "direction": "incoming",
"actionHref": "#chat-bubble-demo", "timestamp": "10:26"
"actionLabel": "View details", &#125;,
"icon": "icon-[lucide--sparkles]", &#123;
"iconClass": "icon-[lucide--sparkles]", "text": "Great. The release notes are attached too.",
"variant": "primary", "direction": "outgoing",
"status": "Active", "timestamp": "10:27",
"time": "09:30", "receipt": "delivered"
"current": false, &#125;,
"selected": false, &#123;
"checked": false, "text": "One more screenshot coming up.",
"disabled": false, "direction": "outgoing",
"outgoing": true, "timestamp": "10:28",
"open": true, "receipt": "sent"
"number": 2, &#125;,
"count": 32, &#123;
"percentage": 72, "text": "Uploading the final export now.",
"color": "#7c3aed", "direction": "outgoing",
"target": "_self", "timestamp": "10:29",
"ariaLabel": "Open primary workflow 2", "receipt": "sending"
"items": [ &#125;,
&#123; &#123;
"label": "Nested option A", "text": "Here is the invoice PDF.",
"value": "nested-a" "direction": "outgoing",
&#125;, "timestamp": "10:30",
&#123; "receipt": "failed",
"label": "Nested option B", "status": "Not delivered",
"value": "nested-b" "actionLabel": "Retry"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Chat Bubble 1 example" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Conversation" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -280,126 +153,63 @@ page ChatBubbleDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1"> <div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ChatBubble size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items='[{"id":"chat-bubble-0-1","key":"chat-bubble-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":"#chat-bubble-demo","actionHref":"#chat-bubble-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":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-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"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ChatBubble <pre><code>page ChatBubbleExample <span>&#123;</span>
title="Chat Bubble example" state items = [
description="A polished default chat bubble for a modern application." <span>&#123;</span>
items='[ "text": "Hi Maya, is the new dashboard ready to review?",
<span>&#123;</span> "direction": "incoming",
"id": "chat-bubble-0-1", "timestamp": "10:24"
"key": "chat-bubble-0-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Primary workflow", "text": "Yes! I have shared the latest version with you.",
"title": "Primary workflow", "direction": "outgoing",
"description": "A clean default configuration for everyday product interfaces.", "timestamp": "10:25",
"text": "A configurable sample message.", "receipt": "read"
"href": "#chat-bubble-demo", <span>&#125;</span>,
"actionHref": "#chat-bubble-demo", <span>&#123;</span>
"actionLabel": "View details", "text": "Thanks, I will take a look this afternoon.",
"icon": "icon-[lucide--sparkles]", "direction": "incoming",
"iconClass": "icon-[lucide--sparkles]", "timestamp": "10:26"
"variant": "primary", <span>&#125;</span>,
"status": "Active", <span>&#123;</span>
"time": "09:30", "text": "Great. The release notes are attached too.",
"current": true, "direction": "outgoing",
"selected": true, "timestamp": "10:27",
"checked": true, "receipt": "delivered"
"disabled": false, <span>&#125;</span>,
"outgoing": false, <span>&#123;</span>
"open": true, "text": "One more screenshot coming up.",
"number": 1, "direction": "outgoing",
"count": 16, "timestamp": "10:28",
"percentage": 72, "receipt": "sent"
"color": "#7c3aed", <span>&#125;</span>,
"target": "_self", <span>&#123;</span>
"ariaLabel": "Open primary workflow 1", "text": "Uploading the final export now.",
"items": [ "direction": "outgoing",
<span>&#123;</span> "timestamp": "10:29",
"label": "Nested option A", "receipt": "sending"
"value": "nested-a" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "text": "Here is the invoice PDF.",
"label": "Nested option B", "direction": "outgoing",
"value": "nested-b" "timestamp": "10:30",
<span>&#125;</span> "receipt": "failed",
], "status": "Not delivered",
"links": [ "actionLabel": "Retry"
<span>&#123;</span> <span>&#125;</span>
"label": "Documentation", ]
"href": "#documentation" view <span>&#123;</span>
<span>&#125;</span>, &lt;ChatBubble
<span>&#123;</span> items="<span>&#123;</span>items<span>&#125;</span>"
"label": "API reference", showMetadata="true"
"href": "#api-reference" /&gt;
<span>&#125;</span> <span>&#125;</span>
], <span>&#125;</span></code></pre>
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "chat-bubble-0-2",
"key": "chat-bubble-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#chat-bubble-demo",
"actionHref": "#chat-bubble-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
showAvatars="true"
showMetadata="true"
ariaLabel="Chat Bubble 1 example"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -411,128 +221,63 @@ page ChatBubbleDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2"> <div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ChatBubble size="sm" title="Compact Chat Bubble" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"chat-bubble-1-1","key":"chat-bubble-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":"#chat-bubble-demo","actionHref":"#chat-bubble-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":"chat-bubble-1-2","key":"chat-bubble-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-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"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 2 example" variant="secondary" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ChatBubble <pre><code>page ChatBubbleExample <span>&#123;</span>
size="sm" state items = [
title="Compact Chat Bubble" <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." "text": "Hi Maya, is the new dashboard ready to review?",
items='[ "direction": "incoming",
<span>&#123;</span> "timestamp": "10:24"
"id": "chat-bubble-1-1", <span>&#125;</span>,
"key": "chat-bubble-1-1", <span>&#123;</span>
"value": "primary", "text": "Yes! I have shared the latest version with you.",
"label": "Secondary workflow", "direction": "outgoing",
"title": "Secondary workflow", "timestamp": "10:25",
"description": "A compact configuration designed for dense application layouts.", "receipt": "read"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#chat-bubble-demo", <span>&#123;</span>
"actionHref": "#chat-bubble-demo", "text": "Thanks, I will take a look this afternoon.",
"actionLabel": "View details", "direction": "incoming",
"icon": "icon-[lucide--zap]", "timestamp": "10:26"
"iconClass": "icon-[lucide--zap]", <span>&#125;</span>,
"variant": "secondary", <span>&#123;</span>
"status": "Active", "text": "Great. The release notes are attached too.",
"time": "10:15", "direction": "outgoing",
"current": true, "timestamp": "10:27",
"selected": true, "receipt": "delivered"
"checked": true, <span>&#125;</span>,
"disabled": false, <span>&#123;</span>
"outgoing": false, "text": "One more screenshot coming up.",
"open": true, "direction": "outgoing",
"number": 1, "timestamp": "10:28",
"count": 24, "receipt": "sent"
"percentage": 48, <span>&#125;</span>,
"color": "#0284c7", <span>&#123;</span>
"target": "_self", "text": "Uploading the final export now.",
"ariaLabel": "Open secondary workflow 1", "direction": "outgoing",
"items": [ "timestamp": "10:29",
<span>&#123;</span> "receipt": "sending"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "text": "Here is the invoice PDF.",
<span>&#123;</span> "direction": "outgoing",
"label": "Nested option B", "timestamp": "10:30",
"value": "nested-b" "receipt": "failed",
<span>&#125;</span> "status": "Not delivered",
], "actionLabel": "Retry"
"links": [ <span>&#125;</span>
<span>&#123;</span> ]
"label": "Documentation", view <span>&#123;</span>
"href": "#documentation" &lt;ChatBubble
<span>&#125;</span>, items="<span>&#123;</span>items<span>&#125;</span>"
<span>&#123;</span> showMetadata="true"
"label": "API reference", /&gt;
"href": "#api-reference" <span>&#125;</span>
<span>&#125;</span> <span>&#125;</span></code></pre>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "chat-bubble-1-2",
"key": "chat-bubble-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#chat-bubble-demo",
"actionHref": "#chat-bubble-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
showAvatars="true"
showMetadata="true"
ariaLabel="Chat Bubble 2 example"
variant="secondary"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -544,128 +289,63 @@ page ChatBubbleDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3"> <div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ChatBubble size="lg" title="Advanced Chat Bubble" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"chat-bubble-2-1","key":"chat-bubble-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":"#chat-bubble-demo","actionHref":"#chat-bubble-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":"chat-bubble-2-2","key":"chat-bubble-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":"#chat-bubble-demo","actionHref":"#chat-bubble-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"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 3 example" variant="success" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ChatBubble <pre><code>page ChatBubbleExample <span>&#123;</span>
size="lg" state items = [
title="Advanced Chat Bubble" <span>&#123;</span>
description="A richer configuration demonstrating additional content and hierarchy." "text": "Hi Maya, is the new dashboard ready to review?",
items='[ "direction": "incoming",
<span>&#123;</span> "timestamp": "10:24"
"id": "chat-bubble-2-1", <span>&#125;</span>,
"key": "chat-bubble-2-1", <span>&#123;</span>
"value": "primary", "text": "Yes! I have shared the latest version with you.",
"label": "Advanced workflow", "direction": "outgoing",
"title": "Advanced workflow", "timestamp": "10:25",
"description": "A richer configuration with more supporting information and actions.", "receipt": "read"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#chat-bubble-demo", <span>&#123;</span>
"actionHref": "#chat-bubble-demo", "text": "Thanks, I will take a look this afternoon.",
"actionLabel": "Explore workflow", "direction": "incoming",
"icon": "icon-[lucide--circle-check]", "timestamp": "10:26"
"iconClass": "icon-[lucide--circle-check]", <span>&#125;</span>,
"variant": "success", <span>&#123;</span>
"status": "Complete", "text": "Great. The release notes are attached too.",
"time": "11:45", "direction": "outgoing",
"current": true, "timestamp": "10:27",
"selected": true, "receipt": "delivered"
"checked": true, <span>&#125;</span>,
"disabled": false, <span>&#123;</span>
"outgoing": false, "text": "One more screenshot coming up.",
"open": true, "direction": "outgoing",
"number": 1, "timestamp": "10:28",
"count": 32, "receipt": "sent"
"percentage": 91, <span>&#125;</span>,
"color": "#059669", <span>&#123;</span>
"target": "_self", "text": "Uploading the final export now.",
"ariaLabel": "Open advanced workflow 1", "direction": "outgoing",
"items": [ "timestamp": "10:29",
<span>&#123;</span> "receipt": "sending"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "text": "Here is the invoice PDF.",
<span>&#123;</span> "direction": "outgoing",
"label": "Nested option B", "timestamp": "10:30",
"value": "nested-b" "receipt": "failed",
<span>&#125;</span> "status": "Not delivered",
], "actionLabel": "Retry"
"links": [ <span>&#125;</span>
<span>&#123;</span> ]
"label": "Documentation", view <span>&#123;</span>
"href": "#documentation" &lt;ChatBubble
<span>&#125;</span>, items="<span>&#123;</span>items<span>&#125;</span>"
<span>&#123;</span> showMetadata="true"
"label": "API reference", /&gt;
"href": "#api-reference" <span>&#125;</span>
<span>&#125;</span> <span>&#125;</span></code></pre>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "chat-bubble-2-2",
"key": "chat-bubble-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": "#chat-bubble-demo",
"actionHref": "#chat-bubble-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
showAvatars="true"
showMetadata="true"
ariaLabel="Chat Bubble 3 example"
variant="success"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/checkbox.wrn
+915 -891
View File
File diff suppressed because it is too large. Load diff
app/pages/components/clipboard.wrn
+25 -44
View File
@@ -1,17 +1,18 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly. // Generated by scripts/generate-showcase.mjs. Do not edit directly.
page ClipboardDetail { page ClipboardDetail {
layout = "showcase" layout = "showcase"
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" state playground_value = ctx.url.searchParams.get("pg_value") ?? "npm install @wrnexus/ui"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Clipboard" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Copy"
state playground_copiedLabel = ctx.url.searchParams.get("pg_copiedLabel") ?? "Clipboard" state playground_copiedLabel = ctx.url.searchParams.get("pg_copiedLabel") ?? "Copied"
state playground_errorLabel = ctx.url.searchParams.get("pg_errorLabel") ?? "Clipboard" state playground_errorLabel = ctx.url.searchParams.get("pg_errorLabel") ?? "Copy failed"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Clipboard example" state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default clipboard for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
state playground_iconOnly = (ctx.url.searchParams.get("pg_iconOnly") ?? "false") === "true"
state playground_code = (ctx.url.searchParams.get("pg_code") ?? "true") === "true" state playground_code = (ctx.url.searchParams.get("pg_code") ?? "true") === "true"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Clipboard" title = "Clipboard"
description = "Theme-aware, responsive clipboard component." description = "Theme-aware, responsive clipboard component."
@@ -25,7 +26,7 @@ page ClipboardDetail {
<span class="showcase-eyebrow">Integrations component</span> <span class="showcase-eyebrow">Integrations component</span>
<h1>Clipboard</h1> <h1>Clipboard</h1>
<p>Theme-aware, responsive clipboard component.</p> <p>Theme-aware, responsive clipboard component.</p>
<div class="detail-badges"><span>11 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>12 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -34,24 +35,19 @@ page ClipboardDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Clipboard value='{playground_value}' label='{playground_label}' copiedLabel='{playground_copiedLabel}' errorLabel='{playground_errorLabel}' title='{playground_title}' description='{playground_description}' code='{playground_code}' size='{playground_size}' color='{playground_color}' disabled='{playground_disabled}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Clipboard value='{playground_value}' label='{playground_label}' copiedLabel='{playground_copiedLabel}' errorLabel='{playground_errorLabel}' title='{playground_title}' description='{playground_description}' iconOnly='{playground_iconOnly}' code='{playground_code}' size='{playground_size}' color='{playground_color}' disabled='{playground_disabled}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Clipboard <pre><code data-playground-code>&lt;Clipboard
value="sample-1" value="npm install @wrnexus/ui"
label="Clipboard"
copiedLabel="Clipboard"
errorLabel="Clipboard"
title="Clipboard example"
description="A polished default clipboard for a modern application."
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-clipboard-value"><span><strong>value</strong><small>string</small></span><input id="playground-clipboard-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-clipboard-label"><span><strong>label</strong><small>string</small></span><input id="playground-clipboard-label" name="pg_label" type="text" value="Clipboard" /></label><label class="playground-field" for="playground-clipboard-copiedLabel"><span><strong>copied Label</strong><small>string</small></span><input id="playground-clipboard-copiedLabel" name="pg_copiedLabel" type="text" value="Clipboard" /></label><label class="playground-field" for="playground-clipboard-errorLabel"><span><strong>error Label</strong><small>string</small></span><input id="playground-clipboard-errorLabel" name="pg_errorLabel" type="text" value="Clipboard" /></label><label class="playground-field" for="playground-clipboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-clipboard-title" name="pg_title" type="text" value="Clipboard example" /></label><label class="playground-field" for="playground-clipboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-clipboard-description" name="pg_description" type="text" value="A polished default clipboard for a modern application." /></label><label class="playground-toggle" for="playground-clipboard-code"><span><strong>code</strong><small>boolean</small></span><input id="playground-clipboard-code" name="pg_code" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-clipboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-clipboard-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-clipboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-clipboard-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-toggle" for="playground-clipboard-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-clipboard-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-clipboard-value"><span><strong>value</strong><small>string</small></span><input id="playground-clipboard-value" name="pg_value" type="text" value="npm install @wrnexus/ui" /></label><label class="playground-field" for="playground-clipboard-label"><span><strong>label</strong><small>string</small></span><input id="playground-clipboard-label" name="pg_label" type="text" value="Copy" /></label><label class="playground-field" for="playground-clipboard-copiedLabel"><span><strong>copied Label</strong><small>string</small></span><input id="playground-clipboard-copiedLabel" name="pg_copiedLabel" type="text" value="Copied" /></label><label class="playground-field" for="playground-clipboard-errorLabel"><span><strong>error Label</strong><small>string</small></span><input id="playground-clipboard-errorLabel" name="pg_errorLabel" type="text" value="Copy failed" /></label><label class="playground-field" for="playground-clipboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-clipboard-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-clipboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-clipboard-description" name="pg_description" type="text" value="" /></label><label class="playground-toggle" for="playground-clipboard-iconOnly"><span><strong>icon Only</strong><small>boolean</small></span><input id="playground-clipboard-iconOnly" name="pg_iconOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-clipboard-code"><span><strong>code</strong><small>boolean</small></span><input id="playground-clipboard-code" name="pg_code" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-clipboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-clipboard-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-clipboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-clipboard-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-toggle" for="playground-clipboard-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-clipboard-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -66,18 +62,13 @@ page ClipboardDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="clipboard-demo-1" class="demo-canvas demo-canvas--1"> <div id="clipboard-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Clipboard value="sample-1" label="Clipboard" copiedLabel="Clipboard" errorLabel="Clipboard" title="Clipboard example" description="A polished default clipboard for a modern application." code="true" size="default" disabled="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="false" code="true" size="default" color="primary" disabled="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Clipboard <pre><code>&lt;Clipboard
value="sample-1" value="npm install @wrnexus/ui"
label="Clipboard"
copiedLabel="Clipboard"
errorLabel="Clipboard"
title="Clipboard example"
description="A polished default clipboard for a modern application."
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -90,19 +81,14 @@ page ClipboardDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="clipboard-demo-2" class="demo-canvas demo-canvas--2"> <div id="clipboard-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Clipboard value="sample-2" label="Compact example" copiedLabel="Compact example" errorLabel="Compact example" title="Compact Clipboard" description="A compact configuration for dashboards and dense product surfaces." code="true" size="sm" disabled="false" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Clipboard <pre><code>&lt;Clipboard
value="sample-2" value="npm install @wrnexus/ui"
label="Compact example" iconOnly="true"
copiedLabel="Compact example"
errorLabel="Compact example"
title="Compact Clipboard"
description="A compact configuration for dashboards and dense product surfaces."
size="sm"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -115,19 +101,14 @@ page ClipboardDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="clipboard-demo-3" class="demo-canvas demo-canvas--3"> <div id="clipboard-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Clipboard value="sample-3" label="Advanced example" copiedLabel="Advanced example" errorLabel="Advanced example" title="Advanced Clipboard" description="A richer configuration demonstrating additional content and hierarchy." code="true" size="lg" disabled="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Clipboard <pre><code>&lt;Clipboard
value="sample-3" value="npm install @wrnexus/ui"
label="Advanced example" iconOnly="true"
copiedLabel="Advanced example"
errorLabel="Advanced example"
title="Advanced Clipboard"
description="A richer configuration demonstrating additional content and hierarchy."
size="lg"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -151,7 +132,7 @@ if (component) registerOutputHandler(component, "success", (payload) =&gt; <span
if (component) registerOutputHandler(component, "error", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "error", (payload) =&gt; <span>&#123;</span>
console.log("error", payload) console.log("error", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Copy"</code></td><td>No</td></tr><tr><td><code>copiedLabel</code></td><td>string</td><td><code>"Copied"</code></td><td>No</td></tr><tr><td><code>errorLabel</code></td><td>string</td><td><code>"Copy failed"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Clipboard"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>code</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Copy"</code></td><td>No</td></tr><tr><td><code>copiedLabel</code></td><td>string</td><td><code>"Copied"</code></td><td>No</td></tr><tr><td><code>errorLabel</code></td><td>string</td><td><code>"Copy failed"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Clipboard"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconOnly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>code</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#clipboard-demo-1">Production default</a><a href="#clipboard-demo-2">Compact application</a><a href="#clipboard-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#clipboard-demo-1">Production default</a><a href="#clipboard-demo-2">Compact application</a><a href="#clipboard-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/collapse.wrn
+905 -881
View File
File diff suppressed because it is too large. Load diff
app/pages/components/color-picker.wrn
+24 -30
View File
@@ -4,11 +4,11 @@ page ColorPickerDetail {
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_id = ctx.url.searchParams.get("pg_id") ?? "" state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
state playground_name = ctx.url.searchParams.get("pg_name") ?? "" state playground_name = ctx.url.searchParams.get("pg_name") ?? "brand-color"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Color Picker" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Brand color"
state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true" state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" state playground_value = ctx.url.searchParams.get("pg_value") ?? "#8b5cf6"
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
@@ -19,7 +19,7 @@ page ColorPickerDetail {
state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true" state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true" state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Color Picker" title = "Color Picker"
description = "Theme-aware, responsive color picker component." description = "Theme-aware, responsive color picker component."
@@ -46,9 +46,9 @@ page ColorPickerDetail {
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;ColorPicker <pre><code data-playground-code>&lt;ColorPicker
label="Color Picker" name="brand-color"
placeholder="Enter a sample value" label="Brand color"
value="sample-1" value="#8b5cf6"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -56,7 +56,7 @@ page ColorPickerDetail {
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-color-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-color-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-color-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-color-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-color-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-color-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-color-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-color-picker-label" name="pg_label" type="text" value="Color Picker" /></label><label class="playground-toggle" for="playground-color-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-color-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-color-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-color-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-color-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-color-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-color-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-color-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-color-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-color-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-color-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-color-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-color-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-color-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-color-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-color-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-color-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-color-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-color-picker-required" name="pg_required" type="checkbox" vLine truncated <div class="playground-fields"><label class="playground-field" for="playground-color-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-color-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-color-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-color-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-color-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-color-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-color-picker-name" name="pg_name" type="text" value="brand-color" /></label><label class="playground-field" for="playground-color-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-color-picker-label" name="pg_label" type="text" value="Brand color" /></label><label class="playground-toggle" for="playground-color-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-color-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-color-picker-placeholder" name="pg_placeholder" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-color-picker-value" name="pg_value" type="text" value="#8b5cf6" /></label><label class="playground-field" for="playground-color-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-color-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-color-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-color-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-color-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-color-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-color-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-color-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-color-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-color-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-color-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-color-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-color-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-color-picker-required" name="pg_required" type="checkbox" value="true"Line truncated
</form> </form>
</div> </div>
</section> </section>
@@ -71,15 +71,15 @@ page ColorPickerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="color-picker-demo-1" class="demo-canvas demo-canvas--1"> <div id="color-picker-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ColorPicker size="default" label="Color Picker" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" icon="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#8b5cf6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ColorPicker <pre><code>&lt;ColorPicker
label="Color Picker" name="brand-color"
placeholder="Enter a sample value" label="Brand color"
value="sample-1" value="#8b5cf6"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -92,18 +92,15 @@ page ColorPickerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="color-picker-demo-2" class="demo-canvas demo-canvas--2"> <div id="color-picker-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ColorPicker size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" icon="icon-[lucide--arrow-right]" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#14b8a6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ColorPicker <pre><code>&lt;ColorPicker
size="sm" name="brand-color"
label="Compact example" label="Brand color"
placeholder="Enter a sample value" value="#14b8a6"
value="sample-2"
icon="icon-[lucide--arrow-right]"
variant="secondary"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -116,18 +113,15 @@ page ColorPickerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="color-picker-demo-3" class="demo-canvas demo-canvas--3"> <div id="color-picker-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ColorPicker size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" icon="icon-[lucide--trash-2]" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#3b82f6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ColorPicker <pre><code>&lt;ColorPicker
size="lg" name="brand-color"
label="Advanced example" label="Brand color"
placeholder="Search by name, email, or identifier" value="#3b82f6"
value="sample-3"
icon="icon-[lucide--trash-2]"
variant="success"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
app/pages/components/columns.wrn
+5 -5
View File
@@ -35,7 +35,7 @@ page ColumnsDetail {
<pre><code data-playground-code>&lt;Columns /&gt;</code></pre> <pre><code data-playground-code>&lt;Columns /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -54,7 +54,7 @@ page ColumnsDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="columns-demo-1" class="demo-canvas demo-canvas--1"> <div id="columns-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Columns size="default" columns="2" gap="lg" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div> <div class="demo-render"><Columns size="default" columns="2" gap="lg" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div>
</div> </div>
<section class="demo-code" aria-label="Two-column content layout usage"> <section class="demo-code" aria-label="Two-column content layout usage">
@@ -74,7 +74,7 @@ page ColumnsDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="columns-demo-2" class="demo-canvas demo-canvas--2"> <div id="columns-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Columns size="compact" columns="3" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Columns></div> <div class="demo-render"><Columns size="compact" columns="3" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Columns></div>
</div> </div>
<section class="demo-code" aria-label="Three compact columns usage"> <section class="demo-code" aria-label="Three compact columns usage">
@@ -97,7 +97,7 @@ page ColumnsDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="columns-demo-3" class="demo-canvas demo-canvas--3"> <div id="columns-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Columns size="lg" columns="4" gap="md" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div></Columns></div> <div class="demo-render"><Columns size="lg" columns="4" gap="md" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div></Columns></div>
</div> </div>
<section class="demo-code" aria-label="Full-width four columns usage"> <section class="demo-code" aria-label="Full-width four columns usage">
@@ -111,7 +111,7 @@ page ColumnsDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
app/pages/components/combo-box.wrn
+1047 -915
View File
File diff suppressed because it is too large. Load diff
app/pages/components/confetti.wrn
+24 -22
View File
@@ -1,14 +1,14 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly. // Generated by scripts/generate-showcase.mjs. Do not edit directly.
page ConfettiDetail { page ConfettiDetail {
layout = "showcase" layout = "showcase"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Confetti" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Celebrate milestone"
state playground_duration = Number(ctx.url.searchParams.get("pg_duration") ?? "1200") state playground_duration = Number(ctx.url.searchParams.get("pg_duration") ?? "1400")
state playground_count = Number(ctx.url.searchParams.get("pg_count") ?? "3") state playground_count = Number(ctx.url.searchParams.get("pg_count") ?? "40")
state playground_autoStart = (ctx.url.searchParams.get("pg_autoStart") ?? "false") === "true" state playground_autoStart = (ctx.url.searchParams.get("pg_autoStart") ?? "false") === "true"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Confetti" title = "Confetti"
description = "Theme-aware, responsive confetti component." description = "Theme-aware, responsive confetti component."
@@ -35,8 +35,9 @@ page ConfettiDetail {
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Confetti <pre><code data-playground-code>&lt;Confetti
label="Confetti" label="Celebrate milestone"
count="3" duration="1400"
count="40"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -44,7 +45,7 @@ page ConfettiDetail {
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-confetti-label"><span><strong>label</strong><small>string</small></span><input id="playground-confetti-label" name="pg_label" type="text" value="Confetti" /></label><label class="playground-field" for="playground-confetti-duration"><span><strong>duration</strong><small>number</small></span><input id="playground-confetti-duration" name="pg_duration" type="number" value="1200" /></label><label class="playground-field" for="playground-confetti-count"><span><strong>count</strong><small>number</small></span><input id="playground-confetti-count" name="pg_count" type="number" value="3" /></label><label class="playground-toggle" for="playground-confetti-autoStart"><span><strong>auto Start</strong><small>boolean</small></span><input id="playground-confetti-autoStart" name="pg_autoStart" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-confetti-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-confetti-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-confetti-size"><span><strong>size</strong><small>string</small></span><select id="playground-confetti-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-confetti-color"><span><strong>color</strong><small>string</small></span><select id="playground-confetti-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-confetti-label"><span><strong>label</strong><small>string</small></span><input id="playground-confetti-label" name="pg_label" type="text" value="Celebrate milestone" /></label><label class="playground-field" for="playground-confetti-duration"><span><strong>duration</strong><small>number</small></span><input id="playground-confetti-duration" name="pg_duration" type="number" value="1400" /></label><label class="playground-field" for="playground-confetti-count"><span><strong>count</strong><small>number</small></span><input id="playground-confetti-count" name="pg_count" type="number" value="40" /></label><label class="playground-toggle" for="playground-confetti-autoStart"><span><strong>auto Start</strong><small>boolean</small></span><input id="playground-confetti-autoStart" name="pg_autoStart" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-confetti-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-confetti-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-confetti-size"><span><strong>size</strong><small>string</small></span><select id="playground-confetti-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-confetti-color"><span><strong>color</strong><small>string</small></span><select id="playground-confetti-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -59,14 +60,15 @@ page ConfettiDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="confetti-demo-1" class="demo-canvas demo-canvas--1"> <div id="confetti-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Confetti label="Confetti" duration="1200" count="3" autoStart="false" disabled="false" size="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Confetti <pre><code>&lt;Confetti
label="Confetti" label="Celebrate milestone"
count="3" duration="1400"
count="40"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -79,15 +81,15 @@ page ConfettiDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="confetti-demo-2" class="demo-canvas demo-canvas--2"> <div id="confetti-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Confetti label="Compact example" duration="1200" count="7" autoStart="false" disabled="false" size="sm" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Confetti <pre><code>&lt;Confetti
label="Compact example" label="Celebrate milestone"
count="7" duration="1400"
size="sm" count="40"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -100,15 +102,15 @@ page ConfettiDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="confetti-demo-3" class="demo-canvas demo-canvas--3"> <div id="confetti-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Confetti label="Advanced example" duration="1200" count="11" autoStart="false" disabled="false" size="lg" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Confetti <pre><code>&lt;Confetti
label="Advanced example" label="Celebrate milestone"
count="11" duration="1400"
size="lg" count="40"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -127,7 +129,7 @@ if (component) registerOutputHandler(component, "start", (payload) =&gt; <span>&
if (component) registerOutputHandler(component, "complete", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "complete", (payload) =&gt; <span>&#123;</span>
console.log("complete", payload) console.log("complete", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Celebrate"</code></td><td>No</td></tr><tr><td><code>duration</code></td><td>number</td><td><code>1200</code></td><td>No</td></tr><tr><td><code>count</code></td><td>number</td><td><code>24</code></td><td>No</td></tr><tr><td><code>autoStart</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Celebrate"</code></td><td>No</td></tr><tr><td><code>duration</code></td><td>number</td><td><code>1200</code></td><td>No</td></tr><tr><td><code>count</code></td><td>number</td><td><code>80</code></td><td>No</td></tr><tr><td><code>autoStart</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#confetti-demo-1">Production default</a><a href="#confetti-demo-2">Compact application</a><a href="#confetti-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#confetti-demo-1">Production default</a><a href="#confetti-demo-2">Compact application</a><a href="#confetti-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/container.wrn
+5 -5
View File
@@ -38,7 +38,7 @@ page ContainerDetail {
&lt;/Container&gt;</code></pre> &lt;/Container&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -57,7 +57,7 @@ page ContainerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="container-demo-1" class="demo-canvas demo-canvas--1"> <div id="container-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Container size="default" columns="2" maxWidth="xl" centered="true" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div> <div class="demo-render"><Container size="default" columns="2" maxWidth="xl" centered="true" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
</div> </div>
<section class="demo-code" aria-label="Standard content container usage"> <section class="demo-code" aria-label="Standard content container usage">
@@ -76,7 +76,7 @@ page ContainerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="container-demo-2" class="demo-canvas demo-canvas--2"> <div id="container-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Container size="compact" columns="2" maxWidth="compact" centered="true" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div> <div class="demo-render"><Container size="compact" columns="2" maxWidth="compact" centered="true" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div>
</div> </div>
<section class="demo-code" aria-label="Compact reading container usage"> <section class="demo-code" aria-label="Compact reading container usage">
@@ -97,7 +97,7 @@ page ContainerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="container-demo-3" class="demo-canvas demo-canvas--3"> <div id="container-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Container size="spacious" columns="2" maxWidth="full" centered="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div> <div class="demo-render"><Container size="spacious" columns="2" maxWidth="full" centered="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div>
</div> </div>
<section class="demo-code" aria-label="Full-width layout container usage"> <section class="demo-code" aria-label="Full-width layout container usage">
@@ -110,7 +110,7 @@ page ContainerDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
app/pages/components/context-menu.wrn
+265 -245
View File
@@ -4,7 +4,7 @@ page ContextMenuDetail {
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]") state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]")
state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true" state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true" state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
state playground_trigger = ctx.url.searchParams.get("pg_trigger") ?? "click" state playground_trigger = ctx.url.searchParams.get("pg_trigger") ?? "contextmenu"
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "pointer" state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "pointer"
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start" state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
@@ -44,128 +44,133 @@ page ContextMenuDetail {
<div class="playground-preview-source" data-playground-preview><ContextMenu items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' trigger='{playground_trigger}' placement='{playground_placement}' align='{playground_align}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' title='{playground_title}' description='{playground_description}' label='{playground_label}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' minWidth='{playground_minWidth}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div data-slot="trigger"><div class="showcase-context-target">Right-click for contextual actions</div></div></ContextMenu></div> <div class="playground-preview-source" data-playground-preview><ContextMenu items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' trigger='{playground_trigger}' placement='{playground_placement}' align='{playground_align}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' title='{playground_title}' description='{playground_description}' label='{playground_label}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' minWidth='{playground_minWidth}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div data-slot="trigger"><div class="showcase-context-target">Right-click for contextual actions</div></div></ContextMenu></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;ContextMenu <pre><code data-playground-code>page ContextMenuExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "context-menu-0-1", "id": "context-menu-0-1",
"key": "context-menu-0-1", "key": "context-menu-0-1",
"value": "primary", "value": "primary",
"label": "Primary workflow", "label": "Primary workflow",
"title": "Primary workflow", "title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.", "text": "A configurable sample message.",
"href": "#context-menu-demo", "href": "#context-menu-demo",
"actionHref": "#context-menu-demo", "actionHref": "#context-menu-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": true, "current": true,
"selected": true, "selected": true,
"checked": true, "checked": true,
"disabled": false, "disabled": false,
"outgoing": false, "outgoing": false,
"open": true, "open": true,
"number": 1, "number": 1,
"count": 16, "count": 16,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 1", "ariaLabel": "Open primary workflow 1",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"id": "context-menu-0-2", "id": "context-menu-0-2",
"key": "context-menu-0-2", "key": "context-menu-0-2",
"value": "secondary", "value": "secondary",
"label": "Additional option", "label": "Additional option",
"title": "Supporting example", "title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.", "text": "Another configurable message.",
"href": "#context-menu-demo", "href": "#context-menu-demo",
"actionHref": "#context-menu-demo", "actionHref": "#context-menu-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": false, "current": false,
"selected": false, "selected": false,
"checked": false, "checked": false,
"disabled": false, "disabled": false,
"outgoing": true, "outgoing": true,
"open": true, "open": true,
"number": 2, "number": 2,
"count": 32, "count": 32,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 2", "ariaLabel": "Open primary workflow 2",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span> <span>&#125;</span>
]' ]
title="Context Menu example" view <span>&#123;</span>
description="A polished default context menu for a modern application." &lt;ContextMenu
label="Context Menu"&gt; items="<span>&#123;</span>items<span>&#125;</span>"
&lt;div data-slot="trigger"&gt; title="Context Menu example"
&lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt; description="A polished default context menu for a modern application."
&lt;/div&gt; label="Context Menu"&gt;
&lt;div data-slot="header"&gt; &lt;div data-slot="trigger"&gt;
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt; &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div data-slot="footer"&gt; &lt;div data-slot="header"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/ContextMenu&gt;</code></pre> &lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/ContextMenu&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -194,7 +199,7 @@ page ContextMenuDetail {
"icon": "icon-[lucide--trash-2]", "icon": "icon-[lucide--trash-2]",
"danger": true "danger": true
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-context-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-trigger"><span><strong>trigger</strong><small>string</small></span><select id="playground-context-menu-trigger" name="pg_trigger"><option value="click" selected>click</option><option value="contextmenu">contextmenu</option><option value="both">both</option><option value="manual">manual</option><option value="hover">hover</option><option value="focus">focus</option></select></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-context-menu-placement" name="pg_placement"><option value="pointer" selected>pointer</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-context-menu-align"><span><strong>align</strong><small>string</small></span><select id="playground-context-menu-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-context-menu-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-context-menu-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-field" for="playground-context-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-context-menu-label" name="pg_label" type="text" value="Context Menu" /></label><label class="playground-toggle" for="playground-context-menu-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-context-menu-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-context-menu-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></labLine truncated ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-context-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-trigger"><span><strong>trigger</strong><small>string</small></span><select id="playground-context-menu-trigger" name="pg_trigger"><option value="contextmenu" selected>contextmenu</option><option value="click">click</option><option value="both">both</option><option value="manual">manual</option><option value="hover">hover</option><option value="focus">focus</option></select></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-context-menu-placement" name="pg_placement"><option value="pointer" selected>pointer</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-context-menu-align"><span><strong>align</strong><small>string</small></span><select id="playground-context-menu-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-context-menu-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-context-menu-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-field" for="playground-context-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-context-menu-label" name="pg_label" type="text" value="Context Menu" /></label><label class="playground-toggle" for="playground-context-menu-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-context-menu-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-context-menu-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-context-menu-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></labLine truncated
</form> </form>
</div> </div>
</section> </section>
@@ -214,43 +219,48 @@ page ContextMenuDetail {
</div> </div>
<section class="demo-code" aria-label="Right-click record actions usage"> <section class="demo-code" aria-label="Right-click record actions usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ContextMenu <pre><code>page ContextMenuExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Open dashboard", "label": "Open dashboard",
"description": "View the operational workspace", "description": "View the operational workspace",
"value": "dashboard", "value": "dashboard",
"icon": "icon-[lucide--layout-dashboard]" "icon": "icon-[lucide--layout-dashboard]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Share record", "label": "Share record",
"value": "share", "value": "share",
"icon": "icon-[lucide--share-2]", "icon": "icon-[lucide--share-2]",
"shortcut": "Ctrl S" "shortcut": "Ctrl S"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"type": "divider" "type": "divider"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Delete record", "label": "Delete record",
"value": "delete", "value": "delete",
"icon": "icon-[lucide--trash-2]", "icon": "icon-[lucide--trash-2]",
"danger": true "danger": true
<span>&#125;</span> <span>&#125;</span>
]' ]
title="Record actions" view <span>&#123;</span>
description="Right-click the target surface" &lt;ContextMenu
label="Context Menu"&gt; items="<span>&#123;</span>items<span>&#125;</span>"
&lt;div data-slot="trigger"&gt; title="Record actions"
&lt;div class="showcase-context-target"&gt;Right-click for contextual actions&lt;/div&gt; description="Right-click the target surface"
&lt;/div&gt; label="Context Menu"&gt;
&lt;div data-slot="header"&gt; &lt;div data-slot="trigger"&gt;
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt; &lt;div class="showcase-context-target"&gt;Right-click for contextual actions&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div data-slot="footer"&gt; &lt;div data-slot="header"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/ContextMenu&gt;</code></pre> &lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/ContextMenu&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -267,48 +277,53 @@ page ContextMenuDetail {
</div> </div>
<section class="demo-code" aria-label="Click-triggered compact menu usage"> <section class="demo-code" aria-label="Click-triggered compact menu usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ContextMenu <pre><code>page ContextMenuExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Open dashboard", "label": "Open dashboard",
"description": "View the operational workspace", "description": "View the operational workspace",
"value": "dashboard", "value": "dashboard",
"icon": "icon-[lucide--layout-dashboard]" "icon": "icon-[lucide--layout-dashboard]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Share record", "label": "Share record",
"value": "share", "value": "share",
"icon": "icon-[lucide--share-2]", "icon": "icon-[lucide--share-2]",
"shortcut": "Ctrl S" "shortcut": "Ctrl S"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"type": "divider" "type": "divider"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Delete record", "label": "Delete record",
"value": "delete", "value": "delete",
"icon": "icon-[lucide--trash-2]", "icon": "icon-[lucide--trash-2]",
"danger": true "danger": true
<span>&#125;</span> <span>&#125;</span>
]' ]
trigger="click" view <span>&#123;</span>
align="center" &lt;ContextMenu
size="sm" items="<span>&#123;</span>items<span>&#125;</span>"
variant="secondary" trigger="click"
title="Quick actions" align="center"
description="A compact configuration for dashboards and dense product surfaces." size="sm"
label="Compact example" variant="secondary"
minWidth="12rem"&gt; title="Quick actions"
&lt;div data-slot="trigger"&gt; description="A compact configuration for dashboards and dense product surfaces."
&lt;button type="button" class="showcase-action"&gt;Open quick actions&lt;/button&gt; label="Compact example"
&lt;/div&gt; minWidth="12rem"&gt;
&lt;div data-slot="header"&gt; &lt;div data-slot="trigger"&gt;
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt; &lt;button type="button" class="showcase-action"&gt;Open quick actions&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div data-slot="footer"&gt; &lt;div data-slot="header"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/ContextMenu&gt;</code></pre> &lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/ContextMenu&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -325,48 +340,53 @@ page ContextMenuDetail {
</div> </div>
<section class="demo-code" aria-label="Pointer and keyboard menu usage"> <section class="demo-code" aria-label="Pointer and keyboard menu usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ContextMenu <pre><code>page ContextMenuExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Open dashboard", "label": "Open dashboard",
"description": "View the operational workspace", "description": "View the operational workspace",
"value": "dashboard", "value": "dashboard",
"icon": "icon-[lucide--layout-dashboard]" "icon": "icon-[lucide--layout-dashboard]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Share record", "label": "Share record",
"value": "share", "value": "share",
"icon": "icon-[lucide--share-2]", "icon": "icon-[lucide--share-2]",
"shortcut": "Ctrl S" "shortcut": "Ctrl S"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"type": "divider" "type": "divider"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Delete record", "label": "Delete record",
"value": "delete", "value": "delete",
"icon": "icon-[lucide--trash-2]", "icon": "icon-[lucide--trash-2]",
"danger": true "danger": true
<span>&#125;</span> <span>&#125;</span>
]' ]
trigger="both" view <span>&#123;</span>
placement="bottom-start" &lt;ContextMenu
align="end" items="<span>&#123;</span>items<span>&#125;</span>"
size="lg" trigger="both"
variant="soft" placement="bottom-start"
title="Accessible actions" align="end"
description="A richer configuration demonstrating additional content and hierarchy." size="lg"
label="Advanced example"&gt; variant="soft"
&lt;div data-slot="trigger"&gt; title="Accessible actions"
&lt;button type="button" class="showcase-action"&gt;Click, press Enter, or right-click&lt;/button&gt; description="A richer configuration demonstrating additional content and hierarchy."
&lt;/div&gt; label="Advanced example"&gt;
&lt;div data-slot="header"&gt; &lt;div data-slot="trigger"&gt;
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt; &lt;button type="button" class="showcase-action"&gt;Click, press Enter, or right-click&lt;/button&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div data-slot="footer"&gt; &lt;div data-slot="header"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/ContextMenu&gt;</code></pre> &lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/ContextMenu&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/ctasection.wrn
-774
View File
@@ -1,774 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page CTASectionDetail {
layout = "showcase"
state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
state playground_title = ctx.url.searchParams.get("pg_title") ?? "CTASection example"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default ctasection for a modern application."
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "CTASection"
state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#ctasection-demo"
state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? ""
state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "CTASection"
state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#ctasection-demo"
state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? ""
state playground_backgroundImage = ctx.url.searchParams.get("pg_backgroundImage") ?? ""
state playground_visualImage = ctx.url.searchParams.get("pg_visualImage") ?? ""
state playground_visualAlt = ctx.url.searchParams.get("pg_visualAlt") ?? ""
state playground_visualIcon = ctx.url.searchParams.get("pg_visualIcon") ?? ""
state playground_visualTitle = ctx.url.searchParams.get("pg_visualTitle") ?? "CTASection example"
state playground_visualDescription = ctx.url.searchParams.get("pg_visualDescription") ?? "A polished default ctasection for a modern application."
state playground_visualItems = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
state playground_visualPosition = ctx.url.searchParams.get("pg_visualPosition") ?? "right"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
state playground_fullBleed = (ctx.url.searchParams.get("pg_fullBleed") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "CTASection"
description = "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>CTASection</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Marketing component</span>
<h1>CTASection</h1>
<p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p>
<div class="detail-badges"><span>25 props</span><span>4 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="CTASection" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure CTASection</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><CTASection eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' align='{playground_align}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' primaryLabel='{playground_primaryLabel}' primaryHref='{playground_primaryHref}' primaryIcon='{playground_primaryIcon}' secondaryLabel='{playground_secondaryLabel}' secondaryHref='{playground_secondaryHref}' secondaryIcon='{playground_secondaryIcon}' backgroundImage='{playground_backgroundImage}' visualImage='{playground_visualImage}' visualAlt='{playground_visualAlt}' visualIcon='{playground_visualIcon}' visualTitle='{playground_visualTitle}' visualDescription='{playground_visualDescription}' visualItems='{playground_visualItems}' visualPosition='{playground_visualPosition}' maxWidth='{playground_maxWidth}' fullBleed='{playground_fullBleed}' class='{playground_class}'><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></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;CTASection
title="CTASection example"
description="A polished default ctasection for a modern application."
align="start"
primaryLabel="CTASection"
primaryHref="#ctasection-demo"
secondaryLabel="CTASection"
secondaryHref="#ctasection-demo"
visualTitle="CTASection example"
visualDescription="A polished default ctasection for a modern application."
visualItems='[
<span>&#123;</span>
"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": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"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": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="visual"&gt;
&lt;div class="showcase-slot"&gt;visual slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/CTASection&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-ctasection-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-ctasection-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-title"><span><strong>title</strong><small>string</small></span><input id="playground-ctasection-title" name="pg_title" type="text" value="CTASection example" /></label><label class="playground-field" for="playground-ctasection-description"><span><strong>description</strong><small>string</small></span><input id="playground-ctasection-description" name="pg_description" type="text" value="A polished default ctasection for a modern application." /></label><label class="playground-field" for="playground-ctasection-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-ctasection-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-align"><span><strong>align</strong><small>string</small></span><select id="playground-ctasection-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="left">left</option><option value="right">right</option><option value="split">split</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-ctasection-size"><span><strong>size</strong><small>string</small></span><select id="playground-ctasection-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-ctasection-color"><span><strong>color</strong><small>string</small></span><select id="playground-ctasection-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-ctasection-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-ctasection-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-ctasection-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-ctasection-primaryLabel" name="pg_primaryLabel" type="text" value="CTASection" /></label><label class="playground-field" for="playground-ctasection-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-ctasection-primaryHref" name="pg_primaryHref" type="text" value="#ctasection-demo" /></label><label class="playground-field" for="playground-ctasection-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-ctasection-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-ctasection-secondaryLabel" name="pg_secondaryLabel" type="text" value="CTASection" /></label><label class="playground-field" for="playground-ctasection-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-ctasection-secondaryHref" name="pg_secondaryHref" type="text" value="#ctasection-demo" /></label><label class="playground-field" for="playground-ctasection-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-ctasection-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-backgroundImage"><span><strong>background Image</strong><small>string</small></span><input id="playground-ctasection-backgroundImage" name="pg_backgroundImage" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualImage"><span><strong>visual Image</strong><small>string</small></span><input id="playground-ctasection-visualImage" name="pg_visualImage" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualAlt"><span><strong>vLine truncated
&#123;
"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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;,
&#123;
"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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-ctasection-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-ctasection-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-field" for="playground-ctasection-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-ctasection-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-toggle" for="playground-ctasection-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-ctasection-fullBleed" name="pg_fullBleed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-ctasection-class"><span><strong>class</strong><small>string</small></span><input id="playground-ctasection-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Split conversion CTA</h2><p>Close a major page section with a clear action and supporting visual content.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="ctasection-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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></div>
</div>
<section class="demo-code" aria-label="Split conversion CTA usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;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"
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='[
<span>&#123;</span>
"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": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"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": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
maxWidth="full"&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="visual"&gt;
&lt;div class="showcase-visual-panel"&gt;
&lt;span class="icon-[lucide--layout-template] size-12" aria-hidden="true"&gt;&lt;/span&gt;
&lt;strong&gt;Composable visual panel&lt;/strong&gt;
&lt;p&gt;Add a screenshot, product preview, media block, chart, form, or illustration.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/CTASection&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Centered signup CTA</h2><p>Use a focused centered CTA after pricing, guides, or product explanations.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="ctasection-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><CTASection eyebrow="Get started" title="Create your first WRNexusJS page" description="Install the framework and compose your application with the component system." icon="icon-[lucide--arrow-right]" align="center" size="sm" variant="solid" primaryLabel="Read installation" primaryHref="/installation" secondaryLabel="Browse examples" secondaryHref="/blocks" visualTitle="Compact CTASection" visualDescription="A compact configuration for dashboards and dense product surfaces." visualItems='[{"id":"ctasection-1-1","key":"ctasection-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":"#ctasection-demo","actionHref":"#ctasection-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":"ctasection-1-2","key":"ctasection-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-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"]}]' maxWidth="xl" fullBleed="false" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Centered signup CTA usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;CTASection
eyebrow="Get started"
title="Create your first WRNexusJS page"
description="Install the framework and compose your application with the component system."
icon="icon-[lucide--arrow-right]"
size="sm"
primaryLabel="Read installation"
primaryHref="/installation"
secondaryLabel="Browse examples"
secondaryHref="/blocks"
visualTitle="Compact CTASection"
visualDescription="A compact configuration for dashboards and dense product surfaces."
visualItems='[
<span>&#123;</span>
"id": "ctasection-1-1",
"key": "ctasection-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": "#ctasection-demo",
"actionHref": "#ctasection-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "ctasection-1-2",
"key": "ctasection-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#ctasection-demo",
"actionHref": "#ctasection-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="visual"&gt;
&lt;div class="showcase-slot"&gt;visual slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/CTASection&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Full-bleed service CTA</h2><p>Use an edge-to-edge surface for high-priority registration, service, or contact actions.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="ctasection-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><CTASection eyebrow="Citizen account" title="Access services and track requests securely" description="Create an account to submit, track, and manage citizen-service requests." icon="icon-[lucide--trash-2]" align="left" size="lg" variant="solid" primaryLabel="Create account" primaryHref="#register" secondaryLabel="Sign in" secondaryHref="#sign-in" visualIcon="icon-[lucide--shield-check]" visualTitle="Secure public access" visualDescription="One account for requests, certificates, updates, and notifications." visualItems='[{"id":"ctasection-2-1","key":"ctasection-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":"#ctasection-demo","actionHref":"#ctasection-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":"ctasection-2-2","key":"ctasection-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":"#ctasection-demo","actionHref":"#ctasection-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"]}]' maxWidth="full" fullBleed="true" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Full-bleed service CTA usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;CTASection
eyebrow="Citizen account"
title="Access services and track requests securely"
description="Create an account to submit, track, and manage citizen-service requests."
icon="icon-[lucide--trash-2]"
align="left"
size="lg"
primaryLabel="Create account"
primaryHref="#register"
secondaryLabel="Sign in"
secondaryHref="#sign-in"
visualIcon="icon-[lucide--shield-check]"
visualTitle="Secure public access"
visualDescription="One account for requests, certificates, updates, and notifications."
visualItems='[
<span>&#123;</span>
"id": "ctasection-2-1",
"key": "ctasection-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": "#ctasection-demo",
"actionHref": "#ctasection-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "ctasection-2-2",
"key": "ctasection-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": "#ctasection-demo",
"actionHref": "#ctasection-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
maxWidth="full"
fullBleed="true"&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="visual"&gt;
&lt;div class="showcase-slot"&gt;visual slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/CTASection&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Ready to get started?"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"center"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>primaryLabel</code></td><td>string</td><td><code>"Get started"</code></td><td>No</td></tr><tr><td><code>primaryHref</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>primaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>backgroundImage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualImage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualDescription</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>visualItems</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>visualPosition</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>fullBleed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#ctasection-demo-1">Split conversion CTA</a><a href="#ctasection-demo-2">Centered signup CTA</a><a href="#ctasection-demo-3">Full-bleed service CTA</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/announcement-bar"><small>Previous</small><strong>← Announcement Bar</strong></a>
<a href="/components/feature-card"><small>Next</small><strong>Feature Card →</strong></a>
</nav>
}
}
app/pages/components/custom-scrollbar.wrn
+4 -4
View File
@@ -36,7 +36,7 @@ page CustomScrollbarDetail {
<pre><code data-playground-code>&lt;CustomScrollbar /&gt;</code></pre> <pre><code data-playground-code>&lt;CustomScrollbar /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -55,7 +55,7 @@ page CustomScrollbarDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="custom-scrollbar-demo-1" class="demo-canvas demo-canvas--1"> <div id="custom-scrollbar-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><CustomScrollbar size="default" axis="vertical" thickness="8" maxHeight="14rem" radius="999px" class="showcase-instance showcase-instance--1"><div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div></CustomScrollbar></div> <div class="demo-render"><CustomScrollbar size="default" axis="vertical" thickness="8" maxHeight="14rem" radius="999px" class="showcase-instance showcase-instance--1"><div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div></CustomScrollbar></div>
</div> </div>
<section class="demo-code" aria-label="Themed scrolling region usage"> <section class="demo-code" aria-label="Themed scrolling region usage">
@@ -75,7 +75,7 @@ page CustomScrollbarDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="custom-scrollbar-demo-2" class="demo-canvas demo-canvas--2"> <div id="custom-scrollbar-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><CustomScrollbar color="info" size="sm" axis="horizontal" thickness="14" maxHeight="8rem" radius="4px" class="showcase-instance showcase-instance--2"><div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div></CustomScrollbar></div> <div class="demo-render"><CustomScrollbar color="info" size="sm" axis="horizontal" thickness="14" maxHeight="8rem" radius="4px" class="showcase-instance showcase-instance--2"><div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div></CustomScrollbar></div>
</div> </div>
<section class="demo-code" aria-label="Horizontal, thicker track usage"> <section class="demo-code" aria-label="Horizontal, thicker track usage">
@@ -92,7 +92,7 @@ page CustomScrollbarDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>axis</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>thickness</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>maxHeight</code></td><td>string</td><td><code>"20rem"</code></td><td>No</td></tr><tr><td><code>radius</code></td><td>string</td><td><code>"999px"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>axis</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>thickness</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>maxHeight</code></td><td>string</td><td><code>"20rem"</code></td><td>No</td></tr><tr><td><code>radius</code></td><td>string</td><td><code>"999px"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
app/pages/components/data-map.wrn
+172 -566
View File
@@ -3,11 +3,11 @@ page DataMapDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Data Map example" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Activity by team"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default data map for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? "Select a tile to inspect its activity score."
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"data-map-0-1\",\"key\":\"data-map-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\":\"#data-map-demo\",\"actionHref\":\"#data-map-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\":\"data-map-0-2\",\"key\":\"data-map-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#data-map-demo\",\"actionHref\":\"#data-map-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") ?? "[{\"label\":\"Design\",\"value\":32},{\"label\":\"Engineering\",\"value\":84},{\"label\":\"Support\",\"value\":56},{\"label\":\"Sales\",\"value\":45},{\"label\":\"Marketing\",\"value\":68},{\"label\":\"Operations\",\"value\":20}]")
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" 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_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Data Map" title = "Data Map"
description = "Theme-aware, responsive data map component." description = "Theme-aware, responsive data map component."
@@ -33,232 +33,73 @@ page DataMapDetail {
<div class="playground-preview-source" data-playground-preview><DataMap size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><DataMap size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;DataMap <pre><code data-playground-code>page DataMapExample <span>&#123;</span>
title="Data Map example" state items = [
description="A polished default data map for a modern application." <span>&#123;</span>
items='[ "label": "Design",
<span>&#123;</span> "value": 32
"id": "data-map-0-1", <span>&#125;</span>,
"key": "data-map-0-1", <span>&#123;</span>
"value": "primary", "label": "Engineering",
"label": "Primary workflow", "value": 84
"title": "Primary workflow", <span>&#125;</span>,
"description": "A clean default configuration for everyday product interfaces.", <span>&#123;</span>
"text": "A configurable sample message.", "label": "Support",
"href": "#data-map-demo", "value": 56
"actionHref": "#data-map-demo", <span>&#125;</span>,
"actionLabel": "View details", <span>&#123;</span>
"icon": "icon-[lucide--sparkles]", "label": "Sales",
"iconClass": "icon-[lucide--sparkles]", "value": 45
"variant": "primary", <span>&#125;</span>,
"status": "Active", <span>&#123;</span>
"time": "09:30", "label": "Marketing",
"current": true, "value": 68
"selected": true, <span>&#125;</span>,
"checked": true, <span>&#123;</span>
"disabled": false, "label": "Operations",
"outgoing": false, "value": 20
"open": true, <span>&#125;</span>
"number": 1, ]
"count": 16, view <span>&#123;</span>
"percentage": 72, &lt;DataMap
"color": "#7c3aed", title="Activity by team"
"target": "_self", description="Select a tile to inspect its activity score."
"ariaLabel": "Open primary workflow 1", items="<span>&#123;</span>items<span>&#125;</span>"
"items": [ /&gt;
<span>&#123;</span> <span>&#125;</span>
"label": "Nested option A", <span>&#125;</span></code></pre>
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "data-map-0-2",
"key": "data-map-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#data-map-demo",
"actionHref": "#data-map-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-data-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-data-map-title" name="pg_title" type="text" value="Data Map example" /></label><label class="playground-field" for="playground-data-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-map-description" name="pg_description" type="text" value="A polished default data map for a modern application." /></label><label class="playground-field" for="playground-data-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-data-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-data-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-data-map-title" name="pg_title" type="text" value="Activity by team" /></label><label class="playground-field" for="playground-data-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-map-description" name="pg_description" type="text" value="Select a tile to inspect its activity score." /></label><label class="playground-field" for="playground-data-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-data-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "data-map-0-1", "label": "Design",
"key": "data-map-0-1", "value": 32
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#data-map-demo",
"actionHref": "#data-map-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;, &#125;,
&#123; &#123;
"id": "data-map-0-2", "label": "Engineering",
"key": "data-map-0-2", "value": 84
"value": "secondary", &#125;,
"label": "Additional option", &#123;
"title": "Supporting example", "label": "Support",
"description": "A clean default configuration for everyday product interfaces.", "value": 56
"text": "Another configurable message.", &#125;,
"href": "#data-map-demo", &#123;
"actionHref": "#data-map-demo", "label": "Sales",
"actionLabel": "View details", "value": 45
"icon": "icon-[lucide--sparkles]", &#125;,
"iconClass": "icon-[lucide--sparkles]", &#123;
"variant": "primary", "label": "Marketing",
"status": "Active", "value": 68
"time": "09:30", &#125;,
"current": false, &#123;
"selected": false, "label": "Operations",
"checked": false, "value": 20
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-data-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-data-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-data-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-data-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-map-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -273,123 +114,46 @@ page DataMapDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="data-map-demo-1" class="demo-canvas demo-canvas--1"> <div id="data-map-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataMap size="default" title="Data Map example" description="A polished default data map for a modern application." items='[{"id":"data-map-0-1","key":"data-map-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":"#data-map-demo","actionHref":"#data-map-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":"data-map-0-2","key":"data-map-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#data-map-demo","actionHref":"#data-map-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataMap <pre><code>page DataMapExample <span>&#123;</span>
title="Data Map example" state items = [
description="A polished default data map for a modern application." <span>&#123;</span>
items='[ "label": "Design",
<span>&#123;</span> "value": 32
"id": "data-map-0-1", <span>&#125;</span>,
"key": "data-map-0-1", <span>&#123;</span>
"value": "primary", "label": "Engineering",
"label": "Primary workflow", "value": 84
"title": "Primary workflow", <span>&#125;</span>,
"description": "A clean default configuration for everyday product interfaces.", <span>&#123;</span>
"text": "A configurable sample message.", "label": "Support",
"href": "#data-map-demo", "value": 56
"actionHref": "#data-map-demo", <span>&#125;</span>,
"actionLabel": "View details", <span>&#123;</span>
"icon": "icon-[lucide--sparkles]", "label": "Sales",
"iconClass": "icon-[lucide--sparkles]", "value": 45
"variant": "primary", <span>&#125;</span>,
"status": "Active", <span>&#123;</span>
"time": "09:30", "label": "Marketing",
"current": true, "value": 68
"selected": true, <span>&#125;</span>,
"checked": true, <span>&#123;</span>
"disabled": false, "label": "Operations",
"outgoing": false, "value": 20
"open": true, <span>&#125;</span>
"number": 1, ]
"count": 16, view <span>&#123;</span>
"percentage": 72, &lt;DataMap
"color": "#7c3aed", title="Activity by team"
"target": "_self", description="Select a tile to inspect its activity score."
"ariaLabel": "Open primary workflow 1", items="<span>&#123;</span>items<span>&#125;</span>"
"items": [ /&gt;
<span>&#123;</span> <span>&#125;</span>
"label": "Nested option A", <span>&#125;</span></code></pre>
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "data-map-0-2",
"key": "data-map-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#data-map-demo",
"actionHref": "#data-map-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -401,125 +165,46 @@ page DataMapDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="data-map-demo-2" class="demo-canvas demo-canvas--2"> <div id="data-map-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataMap size="sm" title="Compact Data Map" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"data-map-1-1","key":"data-map-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":"#data-map-demo","actionHref":"#data-map-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":"data-map-1-2","key":"data-map-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataMap <pre><code>page DataMapExample <span>&#123;</span>
size="sm" state items = [
title="Compact Data Map" <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." "label": "Design",
items='[ "value": 32
<span>&#123;</span> <span>&#125;</span>,
"id": "data-map-1-1", <span>&#123;</span>
"key": "data-map-1-1", "label": "Engineering",
"value": "primary", "value": 84
"label": "Secondary workflow", <span>&#125;</span>,
"title": "Secondary workflow", <span>&#123;</span>
"description": "A compact configuration designed for dense application layouts.", "label": "Support",
"text": "A configurable sample message.", "value": 56
"href": "#data-map-demo", <span>&#125;</span>,
"actionHref": "#data-map-demo", <span>&#123;</span>
"actionLabel": "View details", "label": "Sales",
"icon": "icon-[lucide--zap]", "value": 45
"iconClass": "icon-[lucide--zap]", <span>&#125;</span>,
"variant": "secondary", <span>&#123;</span>
"status": "Active", "label": "Marketing",
"time": "10:15", "value": 68
"current": true, <span>&#125;</span>,
"selected": true, <span>&#123;</span>
"checked": true, "label": "Operations",
"disabled": false, "value": 20
"outgoing": false, <span>&#125;</span>
"open": true, ]
"number": 1, view <span>&#123;</span>
"count": 24, &lt;DataMap
"percentage": 48, title="Activity by team"
"color": "#0284c7", description="Select a tile to inspect its activity score."
"target": "_self", items="<span>&#123;</span>items<span>&#125;</span>"
"ariaLabel": "Open secondary workflow 1", /&gt;
"items": [ <span>&#125;</span>
<span>&#123;</span> <span>&#125;</span></code></pre>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "data-map-1-2",
"key": "data-map-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#data-map-demo",
"actionHref": "#data-map-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
variant="secondary"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -531,125 +216,46 @@ page DataMapDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="data-map-demo-3" class="demo-canvas demo-canvas--3"> <div id="data-map-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DataMap size="lg" title="Advanced Data Map" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"data-map-2-1","key":"data-map-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":"#data-map-demo","actionHref":"#data-map-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":"data-map-2-2","key":"data-map-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":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DataMap <pre><code>page DataMapExample <span>&#123;</span>
size="lg" state items = [
title="Advanced Data Map" <span>&#123;</span>
description="A richer configuration demonstrating additional content and hierarchy." "label": "Design",
items='[ "value": 32
<span>&#123;</span> <span>&#125;</span>,
"id": "data-map-2-1", <span>&#123;</span>
"key": "data-map-2-1", "label": "Engineering",
"value": "primary", "value": 84
"label": "Advanced workflow", <span>&#125;</span>,
"title": "Advanced workflow", <span>&#123;</span>
"description": "A richer configuration with more supporting information and actions.", "label": "Support",
"text": "A configurable sample message.", "value": 56
"href": "#data-map-demo", <span>&#125;</span>,
"actionHref": "#data-map-demo", <span>&#123;</span>
"actionLabel": "Explore workflow", "label": "Sales",
"icon": "icon-[lucide--circle-check]", "value": 45
"iconClass": "icon-[lucide--circle-check]", <span>&#125;</span>,
"variant": "success", <span>&#123;</span>
"status": "Complete", "label": "Marketing",
"time": "11:45", "value": 68
"current": true, <span>&#125;</span>,
"selected": true, <span>&#123;</span>
"checked": true, "label": "Operations",
"disabled": false, "value": 20
"outgoing": false, <span>&#125;</span>
"open": true, ]
"number": 1, view <span>&#123;</span>
"count": 32, &lt;DataMap
"percentage": 91, title="Activity by team"
"color": "#059669", description="Select a tile to inspect its activity score."
"target": "_self", items="<span>&#123;</span>items<span>&#125;</span>"
"ariaLabel": "Open advanced workflow 1", /&gt;
"items": [ <span>&#125;</span>
<span>&#123;</span> <span>&#125;</span></code></pre>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "data-map-2-2",
"key": "data-map-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": "#data-map-demo",
"actionHref": "#data-map-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
variant="success"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/data-table.wrn
+2080 -657
View File
File diff suppressed because it is too large. Load diff
app/pages/components/date-picker.wrn
+531 -41
View File
@@ -6,14 +6,14 @@ page DatePickerDetail {
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Date Picker" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Date Picker"
state playground_id = ctx.url.searchParams.get("pg_id") ?? "" state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
state playground_name = ctx.url.searchParams.get("pg_name") ?? "" state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" state playground_value = ctx.url.searchParams.get("pg_value") ?? "2026-09-20"
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
state playground_type = ctx.url.searchParams.get("pg_type") ?? "date" state playground_type = ctx.url.searchParams.get("pg_type") ?? "date"
state playground_locale = ctx.url.searchParams.get("pg_locale") ?? "en-US" state playground_locale = ctx.url.searchParams.get("pg_locale") ?? "en-US"
state playground_firstDayOfWeek = Number(ctx.url.searchParams.get("pg_firstDayOfWeek") ?? "0") state playground_firstDayOfWeek = Number(ctx.url.searchParams.get("pg_firstDayOfWeek") ?? "0")
state playground_months = ctx.url.searchParams.get("pg_months") ?? "" state playground_months = JSON.parse(ctx.url.searchParams.get("pg_months") ?? "[{\"label\":\"Jan\",\"value\":\"01\"},{\"label\":\"Feb\",\"value\":\"02\"},{\"label\":\"Mar\",\"value\":\"03\"},{\"label\":\"Apr\",\"value\":\"04\"},{\"label\":\"May\",\"value\":\"05\"},{\"label\":\"Jun\",\"value\":\"06\"},{\"label\":\"Jul\",\"value\":\"07\"},{\"label\":\"Aug\",\"value\":\"08\"},{\"label\":\"Sep\",\"value\":\"09\"},{\"label\":\"Oct\",\"value\":\"10\"},{\"label\":\"Nov\",\"value\":\"11\"},{\"label\":\"Dec\",\"value\":\"12\"}]")
state playground_days = ctx.url.searchParams.get("pg_days") ?? "" state playground_days = JSON.parse(ctx.url.searchParams.get("pg_days") ?? "[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]")
state playground_years = ctx.url.searchParams.get("pg_years") ?? "" state playground_years = JSON.parse(ctx.url.searchParams.get("pg_years") ?? "[2024,2025,2026,2027,2028,2029,2030]")
state playground_min = ctx.url.searchParams.get("pg_min") ?? "" state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
state playground_max = ctx.url.searchParams.get("pg_max") ?? "" state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
state playground_step = ctx.url.searchParams.get("pg_step") ?? "" state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
@@ -51,17 +51,205 @@ page DatePickerDetail {
<div class="playground-preview-source" data-playground-preview><DatePicker size='{playground_size}' color='{playground_color}' label='{playground_label}' id='{playground_id}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' type='{playground_type}' locale='{playground_locale}' firstDayOfWeek='{playground_firstDayOfWeek}' months='{playground_months}' days='{playground_days}' years='{playground_years}' min='{playground_min}' max='{playground_max}' step='{playground_step}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' variant='{playground_variant}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><DatePicker size='{playground_size}' color='{playground_color}' label='{playground_label}' id='{playground_id}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' type='{playground_type}' locale='{playground_locale}' firstDayOfWeek='{playground_firstDayOfWeek}' months='{playground_months}' days='{playground_days}' years='{playground_years}' min='{playground_min}' max='{playground_max}' step='{playground_step}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' variant='{playground_variant}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;DatePicker <pre><code data-playground-code>page DatePickerExample <span>&#123;</span>
value="sample-1" state months = [
placeholder="Enter a sample value" <span>&#123;</span>
/&gt;</code></pre> "label": "Jan",
"value": "01"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Feb",
"value": "02"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Mar",
"value": "03"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Apr",
"value": "04"
<span>&#125;</span>,
<span>&#123;</span>
"label": "May",
"value": "05"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jun",
"value": "06"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jul",
"value": "07"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Aug",
"value": "08"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Sep",
"value": "09"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Oct",
"value": "10"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nov",
"value": "11"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Dec",
"value": "12"
<span>&#125;</span>
]
state days = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]
state years = [
2024,
2025,
2026,
2027,
2028,
2029,
2030
]
view <span>&#123;</span>
&lt;DatePicker
value="2026-09-20"
placeholder="Enter a sample value"
months="<span>&#123;</span>months<span>&#125;</span>"
days="<span>&#123;</span>days<span>&#125;</span>"
years="<span>&#123;</span>years<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-date-picker-type" name="pg_type" type="text" value="date" /></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>string</small></span><input id="playground-date-picker-months" name="pg_months" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>string</small></span><input id="playground-date-picker-days" name="pg_days" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>string</small></span><input id="playground-date-picker-years" name="pg_years" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-date-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" forLine truncated <div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="2026-09-20" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><select id="playground-date-picker-type" name="pg_type"><option value="date" selected>date</option><option value="datetime-local">datetime-local</option></select></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>{ label: string; value: string }[]</small></span><textarea id="playground-date-picker-months" name="pg_months" rows="5" spellcheck="false" data-playground-json>[
&#123;
"label": "Jan",
"value": "01"
&#125;,
&#123;
"label": "Feb",
"value": "02"
&#125;,
&#123;
"label": "Mar",
"value": "03"
&#125;,
&#123;
"label": "Apr",
"value": "04"
&#125;,
&#123;
"label": "May",
"value": "05"
&#125;,
&#123;
"label": "Jun",
"value": "06"
&#125;,
&#123;
"label": "Jul",
"value": "07"
&#125;,
&#123;
"label": "Aug",
"value": "08"
&#125;,
&#123;
"label": "Sep",
"value": "09"
&#125;,
&#123;
"label": "Oct",
"value": "10"
&#125;,
&#123;
"label": "Nov",
"value": "11"
&#125;,
&#123;
"label": "Dec",
"value": "12"
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>number[]</small></span><textarea id="playground-date-picker-days" name="pg_days" rows="5" spellcheck="false" data-playground-json>[
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>number[]</small></span><textarea id="playground-date-picker-years" name="pg_years" rows="5" spellcheck="false" data-playground-json>[
2024,
2025,
2026,
2027,
2028,
2029,
2030
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-date-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-date-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-date-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-date-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-date-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-date-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -70,67 +258,369 @@ page DatePickerDetail {
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list"> <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div> <div><span class="demo-case-eyebrow">Recommended</span><h2>Date picker</h2><p>An anchored calendar that does not move surrounding content.</p></div>
<span class="demo-case-number">01</span> <span class="demo-case-number">01</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="date-picker-demo-1" class="demo-canvas demo-canvas--1"> <div id="date-picker-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DatePicker size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><DatePicker size="default" label="Start date" name="start-date" value="2026-09-20" placeholder="Enter a sample value" type="date" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Date picker usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DatePicker <pre><code>page DatePickerExample <span>&#123;</span>
value="sample-1" state months = [
placeholder="Enter a sample value" <span>&#123;</span>
/&gt;</code></pre> "label": "Jan",
"value": "01"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Feb",
"value": "02"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Mar",
"value": "03"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Apr",
"value": "04"
<span>&#125;</span>,
<span>&#123;</span>
"label": "May",
"value": "05"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jun",
"value": "06"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jul",
"value": "07"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Aug",
"value": "08"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Sep",
"value": "09"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Oct",
"value": "10"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nov",
"value": "11"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Dec",
"value": "12"
<span>&#125;</span>
]
state days = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]
state years = [
2024,
2025,
2026,
2027,
2028,
2029,
2030
]
view <span>&#123;</span>
&lt;DatePicker
label="Start date"
name="start-date"
value="2026-09-20"
placeholder="Enter a sample value"
months="<span>&#123;</span>months<span>&#125;</span>"
days="<span>&#123;</span>days<span>&#125;</span>"
years="<span>&#123;</span>years<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div> <div><span class="demo-case-eyebrow">Compact</span><h2>Date and time</h2><p>Choose a calendar date and a time in one field.</p></div>
<span class="demo-case-number">02</span> <span class="demo-case-number">02</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="date-picker-demo-2" class="demo-canvas demo-canvas--2"> <div id="date-picker-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DatePicker size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" firstDayOfWeek="0" variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><DatePicker size="sm" label="Schedule for" name="schedule" value="2026-09-20T09:30" placeholder="Enter a sample value" type="datetime-local" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Date and time usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DatePicker <pre><code>page DatePickerExample <span>&#123;</span>
size="sm" state months = [
label="Compact example" <span>&#123;</span>
value="sample-2" "label": "Jan",
placeholder="Enter a sample value" "value": "01"
variant="secondary" <span>&#125;</span>,
/&gt;</code></pre> <span>&#123;</span>
"label": "Feb",
"value": "02"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Mar",
"value": "03"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Apr",
"value": "04"
<span>&#125;</span>,
<span>&#123;</span>
"label": "May",
"value": "05"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jun",
"value": "06"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jul",
"value": "07"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Aug",
"value": "08"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Sep",
"value": "09"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Oct",
"value": "10"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nov",
"value": "11"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Dec",
"value": "12"
<span>&#125;</span>
]
state days = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]
state years = [
2024,
2025,
2026,
2027,
2028,
2029,
2030
]
view <span>&#123;</span>
&lt;DatePicker
size="sm"
label="Schedule for"
name="schedule"
value="2026-09-20T09:30"
placeholder="Enter a sample value"
type="datetime-local"
months="<span>&#123;</span>months<span>&#125;</span>"
days="<span>&#123;</span>days<span>&#125;</span>"
years="<span>&#123;</span>years<span>&#125;</span>"
variant="secondary"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div> <div><span class="demo-case-eyebrow">Advanced</span><h2>Disabled date</h2><p>A read-only scheduled date.</p></div>
<span class="demo-case-number">03</span> <span class="demo-case-number">03</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="date-picker-demo-3" class="demo-canvas demo-canvas--3"> <div id="date-picker-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DatePicker size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" variant="success" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><DatePicker size="lg" label="Scheduled date" value="2026-09-22" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="success" inline="false" readonly="true" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Disabled date usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DatePicker <pre><code>page DatePickerExample <span>&#123;</span>
size="lg" state months = [
label="Advanced example" <span>&#123;</span>
value="sample-3" "label": "Jan",
placeholder="Search by name, email, or identifier" "value": "01"
variant="success" <span>&#125;</span>,
/&gt;</code></pre> <span>&#123;</span>
"label": "Feb",
"value": "02"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Mar",
"value": "03"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Apr",
"value": "04"
<span>&#125;</span>,
<span>&#123;</span>
"label": "May",
"value": "05"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jun",
"value": "06"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Jul",
"value": "07"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Aug",
"value": "08"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Sep",
"value": "09"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Oct",
"value": "10"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nov",
"value": "11"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Dec",
"value": "12"
<span>&#125;</span>
]
state days = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31
]
state years = [
2024,
2025,
2026,
2027,
2028,
2029,
2030
]
view <span>&#123;</span>
&lt;DatePicker
size="lg"
label="Scheduled date"
value="2026-09-22"
placeholder="Search by name, email, or identifier"
months="<span>&#123;</span>months<span>&#125;</span>"
days="<span>&#123;</span>days<span>&#125;</span>"
years="<span>&#123;</span>years<span>&#125;</span>"
variant="success"
readonly="true"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -173,10 +663,10 @@ if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#
if (component) registerOutputHandler(component, "invalid", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "invalid", (payload) =&gt; <span>&#123;</span>
console.log("invalid", payload) console.log("invalid", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Date Picker"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"date"</code></td><td>No</td></tr><tr><td><code>locale</code></td><td>string</td><td><code>"en-US"</code></td><td>No</td></tr><tr><td><code>firstDayOfWeek</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>months</code></td><td>string</td><td><code>[<span>&#123;</span> label: "Jan", value: "01" <span>&#125;</span>, <span>&#123;</span> label: "Feb", value: "02" <span>&#125;</span>, <span>&#123;</span> label: "Mar", value: "03" <span>&#125;</span>, <span>&#123;</span> label: "Apr", value: "04" <span>&#125;</span>, <span>&#123;</span> label: "May", value: "05" <span>&#125;</span>, <span>&#123;</span> label: "Jun", value: "06" <span>&#125;</span>, <span>&#123;</span> label: "Jul", value: "07" <span>&#125;</span>, <span>&#123;</span> label: "Aug", value: "08" <span>&#125;</span>, <span>&#123;</span> label: "Sep", value: "09" <span>&#125;</span>, <span>&#123;</span> label: "Oct", value: "10" <span>&#125;</span>, <span>&#123;</span> label: "Nov", value: "11" <span>&#125;</span>, <span>&#123;</span> label: "Dec", value: "12" <span>&#125;</span>]</code></td><td>No</td></tr><tr><td><code>days</code></td><td>string</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td><td>No</td></tr><tr><td><code>years</code></td><td>string</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Date Picker"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"date"</code></td><td>No</td></tr><tr><td><code>locale</code></td><td>string</td><td><code>"en-US"</code></td><td>No</td></tr><tr><td><code>firstDayOfWeek</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>months</code></td><td>{ label: string; value: string }[]</td><td><code>[<span>&#123;</span> label: "Jan", value: "01" <span>&#125;</span>, <span>&#123;</span> label: "Feb", value: "02" <span>&#125;</span>, <span>&#123;</span> label: "Mar", value: "03" <span>&#125;</span>, <span>&#123;</span> label: "Apr", value: "04" <span>&#125;</span>, <span>&#123;</span> label: "May", value: "05" <span>&#125;</span>, <span>&#123;</span> label: "Jun", value: "06" <span>&#125;</span>, <span>&#123;</span> label: "Jul", value: "07" <span>&#125;</span>, <span>&#123;</span> label: "Aug", value: "08" <span>&#125;</span>, <span>&#123;</span> label: "Sep", value: "09" <span>&#125;</span>, <span>&#123;</span> label: "Oct", value: "10" <span>&#125;</span>, <span>&#123;</span> label: "Nov", value: "11" <span>&#125;</span>, <span>&#123;</span> label: "Dec", value: "12" <span>&#125;</span>]</code></td><td>No</td></tr><tr><td><code>days</code></td><td>number[]</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td><td>No</td></tr><tr><td><code>years</code></td><td>number[]</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#date-picker-demo-1">Production default</a><a href="#date-picker-demo-2">Compact application</a><a href="#date-picker-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#date-picker-demo-1">Date picker</a><a href="#date-picker-demo-2">Date and time</a><a href="#date-picker-demo-3">Disabled date</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/device-frame.wrn
+479 -459
View File
@@ -40,119 +40,124 @@ page DeviceFrameDetail {
<div class="playground-preview-source" data-playground-preview><DeviceFrame size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' device='{playground_device}' orientation='{playground_orientation}' src='{playground_src}' srcdoc='{playground_srcdoc}' frameTitle='{playground_frameTitle}' showToolbar='{playground_showToolbar}' allow='{playground_allow}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><DeviceFrame size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' device='{playground_device}' orientation='{playground_orientation}' src='{playground_src}' srcdoc='{playground_srcdoc}' frameTitle='{playground_frameTitle}' showToolbar='{playground_showToolbar}' allow='{playground_allow}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;DeviceFrame <pre><code data-playground-code>page DeviceFrameExample <span>&#123;</span>
title="Device Frame example" state items = [
description="A polished default device frame for a modern application." <span>&#123;</span>
items='[ "id": "device-frame-0-1",
<span>&#123;</span> "key": "device-frame-0-1",
"id": "device-frame-0-1", "value": "primary",
"key": "device-frame-0-1", "label": "Primary workflow",
"value": "primary", "title": "Primary workflow",
"label": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"title": "Primary workflow", "text": "A configurable sample message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#device-frame-demo",
"text": "A configurable sample message.", "actionHref": "#device-frame-demo",
"href": "#device-frame-demo", "actionLabel": "View details",
"actionHref": "#device-frame-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": true,
"time": "09:30", "selected": true,
"current": true, "checked": true,
"selected": true, "disabled": false,
"checked": true, "outgoing": false,
"disabled": false, "open": true,
"outgoing": false, "number": 1,
"open": true, "count": 16,
"number": 1, "percentage": 72,
"count": 16, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 1",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>,
] <span>&#123;</span>
<span>&#125;</span>, "id": "device-frame-0-2",
<span>&#123;</span> "key": "device-frame-0-2",
"id": "device-frame-0-2", "value": "secondary",
"key": "device-frame-0-2", "label": "Additional option",
"value": "secondary", "title": "Supporting example",
"label": "Additional option", "description": "A clean default configuration for everyday product interfaces.",
"title": "Supporting example", "text": "Another configurable message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#device-frame-demo",
"text": "Another configurable message.", "actionHref": "#device-frame-demo",
"href": "#device-frame-demo", "actionLabel": "View details",
"actionHref": "#device-frame-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": false,
"time": "09:30", "selected": false,
"current": false, "checked": false,
"selected": false, "disabled": false,
"checked": false, "outgoing": true,
"disabled": false, "open": true,
"outgoing": true, "number": 2,
"open": true, "count": 32,
"number": 2, "percentage": 72,
"count": 32, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 2",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>
] ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;DeviceFrame
frameTitle="Device Frame example" title="Device Frame example"
/&gt;</code></pre> description="A polished default device frame for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
frameTitle="Device Frame example"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -281,124 +286,129 @@ page DeviceFrameDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="device-frame-demo-1" class="demo-canvas demo-canvas--1"> <div id="device-frame-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DeviceFrame size="default" title="Device Frame example" description="A polished default device frame for a modern application." items='[{"id":"device-frame-0-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-0-2","key":"device-frame-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-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"]}]' variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><DeviceFrame size="default" title="Device Frame example" description="A polished default device frame for a modern application." items='[{"id":"device-frame-0-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-0-2","key":"device-frame-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-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"]}]' variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DeviceFrame <pre><code>page DeviceFrameExample <span>&#123;</span>
title="Device Frame example" state items = [
description="A polished default device frame for a modern application." <span>&#123;</span>
items='[ "id": "device-frame-0-1",
<span>&#123;</span> "key": "device-frame-0-1",
"id": "device-frame-0-1", "value": "primary",
"key": "device-frame-0-1", "label": "Primary workflow",
"value": "primary", "title": "Primary workflow",
"label": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"title": "Primary workflow", "text": "A configurable sample message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#device-frame-demo",
"text": "A configurable sample message.", "actionHref": "#device-frame-demo",
"href": "#device-frame-demo", "actionLabel": "View details",
"actionHref": "#device-frame-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": true,
"time": "09:30", "selected": true,
"current": true, "checked": true,
"selected": true, "disabled": false,
"checked": true, "outgoing": false,
"disabled": false, "open": true,
"outgoing": false, "number": 1,
"open": true, "count": 16,
"number": 1, "percentage": 72,
"count": 16, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 1",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>,
] <span>&#123;</span>
<span>&#125;</span>, "id": "device-frame-0-2",
<span>&#123;</span> "key": "device-frame-0-2",
"id": "device-frame-0-2", "value": "secondary",
"key": "device-frame-0-2", "label": "Additional option",
"value": "secondary", "title": "Supporting example",
"label": "Additional option", "description": "A clean default configuration for everyday product interfaces.",
"title": "Supporting example", "text": "Another configurable message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#device-frame-demo",
"text": "Another configurable message.", "actionHref": "#device-frame-demo",
"href": "#device-frame-demo", "actionLabel": "View details",
"actionHref": "#device-frame-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": false,
"time": "09:30", "selected": false,
"current": false, "checked": false,
"selected": false, "disabled": false,
"checked": false, "outgoing": true,
"disabled": false, "open": true,
"outgoing": true, "number": 2,
"open": true, "count": 32,
"number": 2, "percentage": 72,
"count": 32, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 2",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>
] ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;DeviceFrame
frameTitle="Device Frame example" title="Device Frame example"
/&gt;</code></pre> description="A polished default device frame for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
frameTitle="Device Frame example"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -410,126 +420,131 @@ page DeviceFrameDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="device-frame-demo-2" class="demo-canvas demo-canvas--2"> <div id="device-frame-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DeviceFrame size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"device-frame-1-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-1-2","key":"device-frame-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><DeviceFrame size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"device-frame-1-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-1-2","key":"device-frame-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DeviceFrame <pre><code>page DeviceFrameExample <span>&#123;</span>
size="sm" state items = [
title="Compact Device Frame" <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." "id": "device-frame-1-1",
items='[ "key": "device-frame-1-1",
<span>&#123;</span> "value": "primary",
"id": "device-frame-1-1", "label": "Secondary workflow",
"key": "device-frame-1-1", "title": "Secondary workflow",
"value": "primary", "description": "A compact configuration designed for dense application layouts.",
"label": "Secondary workflow", "text": "A configurable sample message.",
"title": "Secondary workflow", "href": "#device-frame-demo",
"description": "A compact configuration designed for dense application layouts.", "actionHref": "#device-frame-demo",
"text": "A configurable sample message.", "actionLabel": "View details",
"href": "#device-frame-demo", "icon": "icon-[lucide--zap]",
"actionHref": "#device-frame-demo", "iconClass": "icon-[lucide--zap]",
"actionLabel": "View details", "variant": "secondary",
"icon": "icon-[lucide--zap]", "status": "Active",
"iconClass": "icon-[lucide--zap]", "time": "10:15",
"variant": "secondary", "current": true,
"status": "Active", "selected": true,
"time": "10:15", "checked": true,
"current": true, "disabled": false,
"selected": true, "outgoing": false,
"checked": true, "open": true,
"disabled": false, "number": 1,
"outgoing": false, "count": 24,
"open": true, "percentage": 48,
"number": 1, "color": "#0284c7",
"count": 24, "target": "_self",
"percentage": 48, "ariaLabel": "Open secondary workflow 1",
"color": "#0284c7", "items": [
"target": "_self", <span>&#123;</span>
"ariaLabel": "Open secondary workflow 1", "label": "Nested option A",
"items": [ "value": "nested-a"
<span>&#123;</span> <span>&#125;</span>,
"label": "Nested option A", <span>&#123;</span>
"value": "nested-a" "label": "Nested option B",
<span>&#125;</span>, "value": "nested-b"
<span>&#123;</span> <span>&#125;</span>
"label": "Nested option B", ],
"value": "nested-b" "links": [
<span>&#125;</span> <span>&#123;</span>
], "label": "Documentation",
"links": [ "href": "#documentation"
<span>&#123;</span> <span>&#125;</span>,
"label": "Documentation", <span>&#123;</span>
"href": "#documentation" "label": "API reference",
<span>&#125;</span>, "href": "#api-reference"
<span>&#123;</span> <span>&#125;</span>
"label": "API reference", ],
"href": "#api-reference" "values": [
<span>&#125;</span> "Included",
], "Standard"
"values": [ ]
"Included", <span>&#125;</span>,
"Standard" <span>&#123;</span>
] "id": "device-frame-1-2",
<span>&#125;</span>, "key": "device-frame-1-2",
<span>&#123;</span> "value": "secondary",
"id": "device-frame-1-2", "label": "Additional option",
"key": "device-frame-1-2", "title": "Supporting example",
"value": "secondary", "description": "A compact configuration designed for dense application layouts.",
"label": "Additional option", "text": "Another configurable message.",
"title": "Supporting example", "href": "#device-frame-demo",
"description": "A compact configuration designed for dense application layouts.", "actionHref": "#device-frame-demo",
"text": "Another configurable message.", "actionLabel": "View details",
"href": "#device-frame-demo", "icon": "icon-[lucide--zap]",
"actionHref": "#device-frame-demo", "iconClass": "icon-[lucide--zap]",
"actionLabel": "View details", "variant": "secondary",
"icon": "icon-[lucide--zap]", "status": "Active",
"iconClass": "icon-[lucide--zap]", "time": "10:15",
"variant": "secondary", "current": false,
"status": "Active", "selected": false,
"time": "10:15", "checked": false,
"current": false, "disabled": false,
"selected": false, "outgoing": true,
"checked": false, "open": true,
"disabled": false, "number": 2,
"outgoing": true, "count": 48,
"open": true, "percentage": 48,
"number": 2, "color": "#0284c7",
"count": 48, "target": "_self",
"percentage": 48, "ariaLabel": "Open secondary workflow 2",
"color": "#0284c7", "items": [
"target": "_self", <span>&#123;</span>
"ariaLabel": "Open secondary workflow 2", "label": "Nested option A",
"items": [ "value": "nested-a"
<span>&#123;</span> <span>&#125;</span>,
"label": "Nested option A", <span>&#123;</span>
"value": "nested-a" "label": "Nested option B",
<span>&#125;</span>, "value": "nested-b"
<span>&#123;</span> <span>&#125;</span>
"label": "Nested option B", ],
"value": "nested-b" "links": [
<span>&#125;</span> <span>&#123;</span>
], "label": "Documentation",
"links": [ "href": "#documentation"
<span>&#123;</span> <span>&#125;</span>,
"label": "Documentation", <span>&#123;</span>
"href": "#documentation" "label": "API reference",
<span>&#125;</span>, "href": "#api-reference"
<span>&#123;</span> <span>&#125;</span>
"label": "API reference", ],
"href": "#api-reference" "values": [
<span>&#125;</span> "Included",
], "Standard"
"values": [ ]
"Included", <span>&#125;</span>
"Standard" ]
] view <span>&#123;</span>
<span>&#125;</span> &lt;DeviceFrame
]' size="sm"
variant="secondary" title="Compact Device Frame"
frameTitle="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces."
/&gt;</code></pre> items="<span>&#123;</span>items<span>&#125;</span>"
variant="secondary"
frameTitle="Compact Device Frame"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -541,126 +556,131 @@ page DeviceFrameDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="device-frame-demo-3" class="demo-canvas demo-canvas--3"> <div id="device-frame-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DeviceFrame size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"device-frame-2-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-2-2","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><DeviceFrame size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"device-frame-2-1","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-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":"device-frame-2-2","key":"device-frame-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":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DeviceFrame <pre><code>page DeviceFrameExample <span>&#123;</span>
size="lg" state items = [
title="Advanced Device Frame" <span>&#123;</span>
description="A richer configuration demonstrating additional content and hierarchy." "id": "device-frame-2-1",
items='[ "key": "device-frame-2-1",
<span>&#123;</span> "value": "primary",
"id": "device-frame-2-1", "label": "Advanced workflow",
"key": "device-frame-2-1", "title": "Advanced workflow",
"value": "primary", "description": "A richer configuration with more supporting information and actions.",
"label": "Advanced workflow", "text": "A configurable sample message.",
"title": "Advanced workflow", "href": "#device-frame-demo",
"description": "A richer configuration with more supporting information and actions.", "actionHref": "#device-frame-demo",
"text": "A configurable sample message.", "actionLabel": "Explore workflow",
"href": "#device-frame-demo", "icon": "icon-[lucide--circle-check]",
"actionHref": "#device-frame-demo", "iconClass": "icon-[lucide--circle-check]",
"actionLabel": "Explore workflow", "variant": "success",
"icon": "icon-[lucide--circle-check]", "status": "Complete",
"iconClass": "icon-[lucide--circle-check]", "time": "11:45",
"variant": "success", "current": true,
"status": "Complete", "selected": true,
"time": "11:45", "checked": true,
"current": true, "disabled": false,
"selected": true, "outgoing": false,
"checked": true, "open": true,
"disabled": false, "number": 1,
"outgoing": false, "count": 32,
"open": true, "percentage": 91,
"number": 1, "color": "#059669",
"count": 32, "target": "_self",
"percentage": 91, "ariaLabel": "Open advanced workflow 1",
"color": "#059669", "items": [
"target": "_self", <span>&#123;</span>
"ariaLabel": "Open advanced workflow 1", "label": "Nested option A",
"items": [ "value": "nested-a"
<span>&#123;</span> <span>&#125;</span>,
"label": "Nested option A", <span>&#123;</span>
"value": "nested-a" "label": "Nested option B",
<span>&#125;</span>, "value": "nested-b"
<span>&#123;</span> <span>&#125;</span>
"label": "Nested option B", ],
"value": "nested-b" "links": [
<span>&#125;</span> <span>&#123;</span>
], "label": "Documentation",
"links": [ "href": "#documentation"
<span>&#123;</span> <span>&#125;</span>,
"label": "Documentation", <span>&#123;</span>
"href": "#documentation" "label": "API reference",
<span>&#125;</span>, "href": "#api-reference"
<span>&#123;</span> <span>&#125;</span>
"label": "API reference", ],
"href": "#api-reference" "values": [
<span>&#125;</span> "Included",
], "Unlimited"
"values": [ ]
"Included", <span>&#125;</span>,
"Unlimited" <span>&#123;</span>
] "id": "device-frame-2-2",
<span>&#125;</span>, "key": "device-frame-2-2",
<span>&#123;</span> "value": "secondary",
"id": "device-frame-2-2", "label": "Additional option",
"key": "device-frame-2-2", "title": "Supporting example",
"value": "secondary", "description": "A richer configuration with more supporting information and actions.",
"label": "Additional option", "text": "Another configurable message.",
"title": "Supporting example", "href": "#device-frame-demo",
"description": "A richer configuration with more supporting information and actions.", "actionHref": "#device-frame-demo",
"text": "Another configurable message.", "actionLabel": "Explore workflow",
"href": "#device-frame-demo", "icon": "icon-[lucide--circle-check]",
"actionHref": "#device-frame-demo", "iconClass": "icon-[lucide--circle-check]",
"actionLabel": "Explore workflow", "variant": "success",
"icon": "icon-[lucide--circle-check]", "status": "Complete",
"iconClass": "icon-[lucide--circle-check]", "time": "11:45",
"variant": "success", "current": false,
"status": "Complete", "selected": false,
"time": "11:45", "checked": false,
"current": false, "disabled": true,
"selected": false, "outgoing": true,
"checked": false, "open": true,
"disabled": true, "number": 2,
"outgoing": true, "count": 64,
"open": true, "percentage": 91,
"number": 2, "color": "#059669",
"count": 64, "target": "_self",
"percentage": 91, "ariaLabel": "Open advanced workflow 2",
"color": "#059669", "items": [
"target": "_self", <span>&#123;</span>
"ariaLabel": "Open advanced workflow 2", "label": "Nested option A",
"items": [ "value": "nested-a"
<span>&#123;</span> <span>&#125;</span>,
"label": "Nested option A", <span>&#123;</span>
"value": "nested-a" "label": "Nested option B",
<span>&#125;</span>, "value": "nested-b"
<span>&#123;</span> <span>&#125;</span>
"label": "Nested option B", ],
"value": "nested-b" "links": [
<span>&#125;</span> <span>&#123;</span>
], "label": "Documentation",
"links": [ "href": "#documentation"
<span>&#123;</span> <span>&#125;</span>,
"label": "Documentation", <span>&#123;</span>
"href": "#documentation" "label": "API reference",
<span>&#125;</span>, "href": "#api-reference"
<span>&#123;</span> <span>&#125;</span>
"label": "API reference", ],
"href": "#api-reference" "values": [
<span>&#125;</span> "Included",
], "Unlimited"
"values": [ ]
"Included", <span>&#125;</span>
"Unlimited" ]
] view <span>&#123;</span>
<span>&#125;</span> &lt;DeviceFrame
]' size="lg"
variant="success" title="Advanced Device Frame"
frameTitle="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy."
/&gt;</code></pre> items="<span>&#123;</span>items<span>&#125;</span>"
variant="success"
frameTitle="Advanced Device Frame"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/divider.wrn
+6 -6
View File
@@ -37,7 +37,7 @@ page DividerDetail {
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -56,7 +56,7 @@ page DividerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="divider-demo-1" class="demo-canvas demo-canvas--1"> <div id="divider-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Divider size="default" label="Related information" orientation="horizontal" variant="solid" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Divider size="default" label="Related information" orientation="horizontal" variant="solid" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Horizontal section divider usage"> <section class="demo-code" aria-label="Horizontal section divider usage">
@@ -75,7 +75,7 @@ page DividerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="divider-demo-2" class="demo-canvas demo-canvas--2"> <div id="divider-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Divider size="sm" label="" orientation="horizontal" variant="secondary" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Divider size="sm" label="" orientation="horizontal" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Minimal unlabeled divider usage"> <section class="demo-code" aria-label="Minimal unlabeled divider usage">
@@ -95,7 +95,7 @@ page DividerDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="divider-demo-3" class="demo-canvas demo-canvas--3"> <div id="divider-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Divider size="lg" color="info" label="Actions" orientation="vertical" variant="success" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Divider size="lg" color="info" label="Actions" orientation="vertical" variant="success" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Vertical toolbar divider usage"> <section class="demo-code" aria-label="Vertical toolbar divider usage">
@@ -110,7 +110,7 @@ page DividerDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
@@ -119,7 +119,7 @@ page DividerDetail {
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
<a href="/components/custom-scrollbar"><small>Previous</small><strong>← Custom Scrollbar</strong></a> <a href="/components/custom-scrollbar"><small>Previous</small><strong>← Custom Scrollbar</strong></a>
<a href="/components/feature-grid"><small>Next</small><strong>Feature Grid →</strong></a> <a href="/components/grid"><small>Next</small><strong>Grid →</strong></a>
</nav> </nav>
} }
} }
app/pages/components/drag-and-drop.wrn
+112 -566
View File
@@ -3,11 +3,11 @@ page DragAndDropDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drag And Drop example" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Project priorities"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default drag and drop for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? "Drag to reorder, or use the arrow buttons."
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"drag-and-drop-0-1\",\"key\":\"drag-and-drop-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\":\"#drag-and-drop-demo\",\"actionHref\":\"#drag-and-drop-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\":\"drag-and-drop-0-2\",\"key\":\"drag-and-drop-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#drag-and-drop-demo\",\"actionHref\":\"#drag-and-drop-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") ?? "[{\"label\":\"Review designs\"},{\"label\":\"Build the dashboard\"},{\"label\":\"Test accessibility\"},{\"label\":\"Prepare release notes\"}]")
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" 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_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Drag And Drop" title = "Drag And Drop"
description = "Theme-aware, responsive drag and drop component." description = "Theme-aware, responsive drag and drop component."
@@ -33,232 +33,49 @@ page DragAndDropDetail {
<div class="playground-preview-source" data-playground-preview><DragAndDrop size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><DragAndDrop size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;DragAndDrop <pre><code data-playground-code>page DragAndDropExample <span>&#123;</span>
title="Drag And Drop example" state items = [
description="A polished default drag and drop for a modern application." <span>&#123;</span>
items='[ "label": "Review designs"
<span>&#123;</span> <span>&#125;</span>,
"id": "drag-and-drop-0-1", <span>&#123;</span>
"key": "drag-and-drop-0-1", "label": "Build the dashboard"
"value": "primary", <span>&#125;</span>,
"label": "Primary workflow", <span>&#123;</span>
"title": "Primary workflow", "label": "Test accessibility"
"description": "A clean default configuration for everyday product interfaces.", <span>&#125;</span>,
"text": "A configurable sample message.", <span>&#123;</span>
"href": "#drag-and-drop-demo", "label": "Prepare release notes"
"actionHref": "#drag-and-drop-demo", <span>&#125;</span>
"actionLabel": "View details", ]
"icon": "icon-[lucide--sparkles]", view <span>&#123;</span>
"iconClass": "icon-[lucide--sparkles]", &lt;DragAndDrop
"variant": "primary", title="Project priorities"
"status": "Active", description="Drag to reorder, or use the arrow buttons."
"time": "09:30", items="<span>&#123;</span>items<span>&#125;</span>"
"current": true, /&gt;
"selected": true, <span>&#125;</span>
"checked": true, <span>&#125;</span></code></pre>
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "drag-and-drop-0-2",
"key": "drag-and-drop-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#drag-and-drop-demo",
"actionHref": "#drag-and-drop-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-drag-and-drop-size"><span><strong>size</strong><small>string</small></span><select id="playground-drag-and-drop-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-drag-and-drop-color"><span><strong>color</strong><small>string</small></span><select id="playground-drag-and-drop-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-drag-and-drop-title"><span><strong>title</strong><small>string</small></span><input id="playground-drag-and-drop-title" name="pg_title" type="text" value="Drag And Drop example" /></label><label class="playground-field" for="playground-drag-and-drop-description"><span><strong>description</strong><small>string</small></span><input id="playground-drag-and-drop-description" name="pg_description" type="text" value="A polished default drag and drop for a modern application." /></label><label class="playground-field" for="playground-drag-and-drop-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-drag-and-drop-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-drag-and-drop-size"><span><strong>size</strong><small>string</small></span><select id="playground-drag-and-drop-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-drag-and-drop-color"><span><strong>color</strong><small>string</small></span><select id="playground-drag-and-drop-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-drag-and-drop-title"><span><strong>title</strong><small>string</small></span><input id="playground-drag-and-drop-title" name="pg_title" type="text" value="Project priorities" /></label><label class="playground-field" for="playground-drag-and-drop-description"><span><strong>description</strong><small>string</small></span><input id="playground-drag-and-drop-description" name="pg_description" type="text" value="Drag to reorder, or use the arrow buttons." /></label><label class="playground-field" for="playground-drag-and-drop-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-drag-and-drop-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "drag-and-drop-0-1", "label": "Review designs"
"key": "drag-and-drop-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": "#drag-and-drop-demo",
"actionHref": "#drag-and-drop-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;, &#125;,
&#123; &#123;
"id": "drag-and-drop-0-2", "label": "Build the dashboard"
"key": "drag-and-drop-0-2", &#125;,
"value": "secondary", &#123;
"label": "Additional option", "label": "Test accessibility"
"title": "Supporting example", &#125;,
"description": "A clean default configuration for everyday product interfaces.", &#123;
"text": "Another configurable message.", "label": "Prepare release notes"
"href": "#drag-and-drop-demo",
"actionHref": "#drag-and-drop-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-drag-and-drop-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-drag-and-drop-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-drag-and-drop-class"><span><strong>class</strong><small>string</small></span><input id="playground-drag-and-drop-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-drag-and-drop-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-drag-and-drop-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-drag-and-drop-class"><span><strong>class</strong><small>string</small></span><input id="playground-drag-and-drop-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -273,123 +90,34 @@ page DragAndDropDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="drag-and-drop-demo-1" class="demo-canvas demo-canvas--1"> <div id="drag-and-drop-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DragAndDrop size="default" title="Drag And Drop example" description="A polished default drag and drop for a modern application." items='[{"id":"drag-and-drop-0-1","key":"drag-and-drop-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":"#drag-and-drop-demo","actionHref":"#drag-and-drop-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":"drag-and-drop-0-2","key":"drag-and-drop-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DragAndDrop <pre><code>page DragAndDropExample <span>&#123;</span>
title="Drag And Drop example" state items = [
description="A polished default drag and drop for a modern application." <span>&#123;</span>
items='[ "label": "Review designs"
<span>&#123;</span> <span>&#125;</span>,
"id": "drag-and-drop-0-1", <span>&#123;</span>
"key": "drag-and-drop-0-1", "label": "Build the dashboard"
"value": "primary", <span>&#125;</span>,
"label": "Primary workflow", <span>&#123;</span>
"title": "Primary workflow", "label": "Test accessibility"
"description": "A clean default configuration for everyday product interfaces.", <span>&#125;</span>,
"text": "A configurable sample message.", <span>&#123;</span>
"href": "#drag-and-drop-demo", "label": "Prepare release notes"
"actionHref": "#drag-and-drop-demo", <span>&#125;</span>
"actionLabel": "View details", ]
"icon": "icon-[lucide--sparkles]", view <span>&#123;</span>
"iconClass": "icon-[lucide--sparkles]", &lt;DragAndDrop
"variant": "primary", title="Project priorities"
"status": "Active", description="Drag to reorder, or use the arrow buttons."
"time": "09:30", items="<span>&#123;</span>items<span>&#125;</span>"
"current": true, /&gt;
"selected": true, <span>&#125;</span>
"checked": true, <span>&#125;</span></code></pre>
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "drag-and-drop-0-2",
"key": "drag-and-drop-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#drag-and-drop-demo",
"actionHref": "#drag-and-drop-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -401,125 +129,34 @@ page DragAndDropDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="drag-and-drop-demo-2" class="demo-canvas demo-canvas--2"> <div id="drag-and-drop-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DragAndDrop size="sm" title="Compact Drag And Drop" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"drag-and-drop-1-1","key":"drag-and-drop-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":"#drag-and-drop-demo","actionHref":"#drag-and-drop-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":"drag-and-drop-1-2","key":"drag-and-drop-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DragAndDrop <pre><code>page DragAndDropExample <span>&#123;</span>
size="sm" state items = [
title="Compact Drag And Drop" <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." "label": "Review designs"
items='[ <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"id": "drag-and-drop-1-1", "label": "Build the dashboard"
"key": "drag-and-drop-1-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Secondary workflow", "label": "Test accessibility"
"title": "Secondary workflow", <span>&#125;</span>,
"description": "A compact configuration designed for dense application layouts.", <span>&#123;</span>
"text": "A configurable sample message.", "label": "Prepare release notes"
"href": "#drag-and-drop-demo", <span>&#125;</span>
"actionHref": "#drag-and-drop-demo", ]
"actionLabel": "View details", view <span>&#123;</span>
"icon": "icon-[lucide--zap]", &lt;DragAndDrop
"iconClass": "icon-[lucide--zap]", title="Project priorities"
"variant": "secondary", description="Drag to reorder, or use the arrow buttons."
"status": "Active", items="<span>&#123;</span>items<span>&#125;</span>"
"time": "10:15", /&gt;
"current": true, <span>&#125;</span>
"selected": true, <span>&#125;</span></code></pre>
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "drag-and-drop-1-2",
"key": "drag-and-drop-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#drag-and-drop-demo",
"actionHref": "#drag-and-drop-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
variant="secondary"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -531,125 +168,34 @@ page DragAndDropDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="drag-and-drop-demo-3" class="demo-canvas demo-canvas--3"> <div id="drag-and-drop-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><DragAndDrop size="lg" title="Advanced Drag And Drop" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"drag-and-drop-2-1","key":"drag-and-drop-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":"#drag-and-drop-demo","actionHref":"#drag-and-drop-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":"drag-and-drop-2-2","key":"drag-and-drop-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":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;DragAndDrop <pre><code>page DragAndDropExample <span>&#123;</span>
size="lg" state items = [
title="Advanced Drag And Drop" <span>&#123;</span>
description="A richer configuration demonstrating additional content and hierarchy." "label": "Review designs"
items='[ <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"id": "drag-and-drop-2-1", "label": "Build the dashboard"
"key": "drag-and-drop-2-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Advanced workflow", "label": "Test accessibility"
"title": "Advanced workflow", <span>&#125;</span>,
"description": "A richer configuration with more supporting information and actions.", <span>&#123;</span>
"text": "A configurable sample message.", "label": "Prepare release notes"
"href": "#drag-and-drop-demo", <span>&#125;</span>
"actionHref": "#drag-and-drop-demo", ]
"actionLabel": "Explore workflow", view <span>&#123;</span>
"icon": "icon-[lucide--circle-check]", &lt;DragAndDrop
"iconClass": "icon-[lucide--circle-check]", title="Project priorities"
"variant": "success", description="Drag to reorder, or use the arrow buttons."
"status": "Complete", items="<span>&#123;</span>items<span>&#125;</span>"
"time": "11:45", /&gt;
"current": true, <span>&#125;</span>
"selected": true, <span>&#125;</span></code></pre>
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "drag-and-drop-2-2",
"key": "drag-and-drop-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": "#drag-and-drop-demo",
"actionHref": "#drag-and-drop-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
variant="success"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/drawer.wrn
+39 -1
View File
@@ -179,6 +179,44 @@ page DrawerDetail {
&lt;div data-slot="footer"&gt; &lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/Drawer&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Top notice drawer</h2><p>Slide a panel down from the top edge for announcements, search, or quick settings.</p></div>
<span class="demo-case-number">04</span>
</header>
<div class="demo-workbench">
<div id="drawer-demo-4" class="demo-canvas demo-canvas--4">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the drawer</p>
<div class="demo-render"><Drawer open="false" defaultOpen="false" placement="top" size="sm" variant="success" title="Scheduled maintenance" description="The workspace will be read-only on Sunday from 02:00 to 03:00 UTC." icon="icon-[lucide--trash-2]" label="Advanced example" closeLabel="Advanced example" showClose="true" closeOnBackdrop="true" closeOnEscape="true" duration="260" overlay="true" scrollable="true" triggerLabel="Open top drawer" triggerIcon="icon-[lucide--panel-top-open]" class="showcase-instance showcase-instance--4"><div class="showcase-overlay-content"><p>Save your work before the window starts.</p></div></Drawer></div>
</div>
<section class="demo-code" aria-label="Top notice drawer usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Drawer
placement="top"
size="sm"
variant="success"
title="Scheduled maintenance"
description="The workspace will be read-only on Sunday from 02:00 to 03:00 UTC."
icon="icon-[lucide--trash-2]"
label="Advanced example"
closeLabel="Advanced example"
triggerLabel="Open top drawer"
triggerIcon="icon-[lucide--panel-top-open]"&gt;
&lt;div data-slot="trigger"&gt;
&lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="header"&gt;
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt;
&lt;div class="showcase-overlay-content"&gt;&lt;p&gt;Save your work before the window starts.&lt;/p&gt;&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Drawer&gt;</code></pre> &lt;/Drawer&gt;</code></pre>
</section> </section>
</div> </div>
@@ -205,7 +243,7 @@ if (component) registerOutputHandler(component, "cancel", (payload) =&gt; <span>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close drawer"</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>duration</code></td><td>number</td><td><code>260</code></td><td>No</td></tr><tr><td><code>overlay</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close drawer"</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>duration</code></td><td>number</td><td><code>260</code></td><td>No</td></tr><tr><td><code>overlay</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawer-demo-1">Right-side detail drawer</a><a href="#drawer-demo-2">Bottom mobile drawer</a><a href="#drawer-demo-3">Wide navigation drawer</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawer-demo-1">Right-side detail drawer</a><a href="#drawer-demo-2">Bottom mobile drawer</a><a href="#drawer-demo-3">Wide navigation drawer</a><a href="#drawer-demo-4">Top notice drawer</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/dropdown.wrn
+284 -253
View File
@@ -1,14 +1,17 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly. // Generated by scripts/generate-showcase.mjs. Do not edit directly.
page DropdownDetail { page DropdownDetail {
layout = "showcase" layout = "showcase"
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]") state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Open dashboard\",\"description\":\"View the operational workspace\",\"value\":\"dashboard\",\"icon\":\"icon-[lucide--layout-dashboard]\"},{\"label\":\"Share record\",\"value\":\"share\",\"icon\":\"icon-[lucide--share-2]\",\"shortcut\":\"Ctrl S\"},{\"type\":\"divider\"},{\"label\":\"Delete record\",\"value\":\"delete\",\"icon\":\"icon-[lucide--trash-2]\",\"danger\":true}]")
state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true" state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true" state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Open playground menu" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Open playground menu"
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Dropdown 1 example"
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_showChevron = (ctx.url.searchParams.get("pg_showChevron") ?? "true") === "true" state playground_showChevron = (ctx.url.searchParams.get("pg_showChevron") ?? "true") === "true"
state playground_menuLabel = ctx.url.searchParams.get("pg_menuLabel") ?? "Dropdown" state playground_menuLabel = ctx.url.searchParams.get("pg_menuLabel") ?? "Dropdown"
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom-start" state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom-start"
state playground_mobilePanel = ctx.url.searchParams.get("pg_mobilePanel") ?? "sheet"
state playground_width = ctx.url.searchParams.get("pg_width") ?? "md" state playground_width = ctx.url.searchParams.get("pg_width") ?? "md"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
@@ -31,7 +34,7 @@ page DropdownDetail {
<span class="showcase-eyebrow">Overlays component</span> <span class="showcase-eyebrow">Overlays component</span>
<h1>Dropdown</h1> <h1>Dropdown</h1>
<p>Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.</p> <p>Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.</p>
<div class="detail-badges"><span>17 props</span><span>4 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>20 props</span><span>4 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -40,138 +43,145 @@ page DropdownDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Dropdown items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' label='{playground_label}' icon='{playground_icon}' showChevron='{playground_showChevron}' menuLabel='{playground_menuLabel}' placement='{playground_placement}' width='{playground_width}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' emptyLabel='{playground_emptyLabel}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Dropdown value='{playground_value}' items='{playground_items}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' label='{playground_label}' ariaLabel='{playground_ariaLabel}' icon='{playground_icon}' showChevron='{playground_showChevron}' menuLabel='{playground_menuLabel}' placement='{playground_placement}' mobilePanel='{playground_mobilePanel}' width='{playground_width}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' closeOnSelect='{playground_closeOnSelect}' closeOnOutside='{playground_closeOnOutside}' disabled='{playground_disabled}' emptyLabel='{playground_emptyLabel}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Dropdown <pre><code data-playground-code>page DropdownExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "dropdown-0-1", "id": "dropdown-0-1",
"key": "dropdown-0-1", "key": "dropdown-0-1",
"value": "primary", "value": "primary",
"label": "Primary workflow", "label": "Primary workflow",
"title": "Primary workflow", "title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.", "text": "A configurable sample message.",
"href": "#dropdown-demo", "href": "#dropdown-demo",
"actionHref": "#dropdown-demo", "actionHref": "#dropdown-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": true, "current": true,
"selected": true, "selected": true,
"checked": true, "checked": true,
"disabled": false, "disabled": false,
"outgoing": false, "outgoing": false,
"open": true, "open": true,
"number": 1, "number": 1,
"count": 16, "count": 16,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 1", "ariaLabel": "Open primary workflow 1",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"id": "dropdown-0-2", "id": "dropdown-0-2",
"key": "dropdown-0-2", "key": "dropdown-0-2",
"value": "secondary", "value": "secondary",
"label": "Additional option", "label": "Additional option",
"title": "Supporting example", "title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.", "text": "Another configurable message.",
"href": "#dropdown-demo", "href": "#dropdown-demo",
"actionHref": "#dropdown-demo", "actionHref": "#dropdown-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": false, "current": false,
"selected": false, "selected": false,
"checked": false, "checked": false,
"disabled": false, "disabled": false,
"outgoing": true, "outgoing": true,
"open": true, "open": true,
"number": 2, "number": 2,
"count": 32, "count": 32,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 2", "ariaLabel": "Open primary workflow 2",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span> <span>&#125;</span>
]' ]
label="Dropdown" view <span>&#123;</span>
menuLabel="Dropdown" &lt;Dropdown
emptyLabel="Dropdown"&gt; value="sample-1"
&lt;div data-slot="trigger"&gt; items="<span>&#123;</span>items<span>&#125;</span>"
&lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt; label="Dropdown"
&lt;/div&gt; ariaLabel="Dropdown 1 example"
&lt;div data-slot="header"&gt; menuLabel="Dropdown"
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt; emptyLabel="Dropdown"&gt;
&lt;/div&gt; &lt;div data-slot="trigger"&gt;
&lt;div data-slot="footer"&gt; &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div data-slot="header"&gt;
&lt;/Dropdown&gt;</code></pre> &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Dropdown&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>17 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>20 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-dropdown-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-dropdown-value"><span><strong>value</strong><small>string | number</small></span><input id="playground-dropdown-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-dropdown-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"label": "Open dashboard", "label": "Open dashboard",
"description": "View the operational workspace", "description": "View the operational workspace",
@@ -193,7 +203,7 @@ page DropdownDetail {
"icon": "icon-[lucide--trash-2]", "icon": "icon-[lucide--trash-2]",
"danger": true "danger": true
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-dropdown-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-dropdown-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-dropdown-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-label"><span><strong>label</strong><small>string</small></span><input id="playground-dropdown-label" name="pg_label" type="text" value="Open playground menu" /></label><label class="playground-field" for="playground-dropdown-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-dropdown-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-dropdown-showChevron"><span><strong>show Chevron</strong><small>boolean</small></span><input id="playground-dropdown-showChevron" name="pg_showChevron" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-menuLabel"><span><strong>menu Label</strong><small>string</small></span><input id="playground-dropdown-menuLabel" name="pg_menuLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-dropdown-placement" name="pg_placement"><option value="bottom-start" selected>bottom-start</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-dropdown-width"><span><strong>width</strong><small>string</small></span><select id="playground-dropdown-width" name="pg_width"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option></select></label><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-dropdown-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-dropdown-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-dropdown-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-dropdown-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-dropdown-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-dropdown-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playgrounLine truncated ]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-dropdown-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-dropdown-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-dropdown-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-label"><span><strong>label</strong><small>string</small></span><input id="playground-dropdown-label" name="pg_label" type="text" value="Open playground menu" /></label><label class="playground-field" for="playground-dropdown-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-dropdown-ariaLabel" name="pg_ariaLabel" type="text" value="Dropdown 1 example" /></label><label class="playground-field" for="playground-dropdown-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-dropdown-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-dropdown-showChevron"><span><strong>show Chevron</strong><small>boolean</small></span><input id="playground-dropdown-showChevron" name="pg_showChevron" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-menuLabel"><span><strong>menu Label</strong><small>string</small></span><input id="playground-dropdown-menuLabel" name="pg_menuLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-dropdown-placement" name="pg_placement"><option value="bottom-start" selected>bottom-start</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="bottom-end">bottom-end</option><option value="top">top</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-dropdown-mobilePanel"><span><strong>mobile Panel</strong><small>string</small></span><input id="playground-dropdown-mobilePanel" name="pg_mobilePanel" type="text" value="sheet" /></label><label class="playground-field" for="playground-dropdown-width"><span><strong>width</strong><small>string</small></span><select id="playground-dropdown-width" name="pg_width"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option></select></label><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-dropdown-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-dropdown-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option></select></label><label class="playground-toggle" for="playground-dropdown-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-dropdown-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-dropdown-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small><Line truncated
</form> </form>
</div> </div>
</section> </section>
@@ -209,49 +219,56 @@ page DropdownDetail {
<div id="dropdown-demo-1" class="demo-canvas demo-canvas--1"> <div id="dropdown-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p> <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
<div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Open actions" icon="icon-[lucide--menu]" showChevron="true" menuLabel="Dropdown" placement="bottom-start" width="lg" size="default" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Dropdown" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Dropdown value="sample-1" items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Open actions" ariaLabel="Dropdown 1 example" icon="icon-[lucide--menu]" showChevron="true" menuLabel="Dropdown" placement="bottom-start" width="lg" size="default" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Dropdown" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Action dropdown usage"> <section class="demo-code" aria-label="Action dropdown usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Dropdown <pre><code>page DropdownExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Open dashboard", "label": "Open dashboard",
"description": "View the operational workspace", "description": "View the operational workspace",
"value": "dashboard", "value": "dashboard",
"icon": "icon-[lucide--layout-dashboard]" "icon": "icon-[lucide--layout-dashboard]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Share record", "label": "Share record",
"value": "share", "value": "share",
"icon": "icon-[lucide--share-2]", "icon": "icon-[lucide--share-2]",
"shortcut": "Ctrl S" "shortcut": "Ctrl S"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"type": "divider" "type": "divider"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Delete record", "label": "Delete record",
"value": "delete", "value": "delete",
"icon": "icon-[lucide--trash-2]", "icon": "icon-[lucide--trash-2]",
"danger": true "danger": true
<span>&#125;</span> <span>&#125;</span>
]' ]
label="Open actions" view <span>&#123;</span>
icon="icon-[lucide--menu]" &lt;Dropdown
menuLabel="Dropdown" value="sample-1"
width="lg" items="<span>&#123;</span>items<span>&#125;</span>"
emptyLabel="Dropdown"&gt; label="Open actions"
&lt;div data-slot="trigger"&gt; ariaLabel="Dropdown 1 example"
&lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt; icon="icon-[lucide--menu]"
&lt;/div&gt; menuLabel="Dropdown"
&lt;div data-slot="header"&gt; width="lg"
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt; emptyLabel="Dropdown"&gt;
&lt;/div&gt; &lt;div data-slot="trigger"&gt;
&lt;div data-slot="footer"&gt; &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div data-slot="header"&gt;
&lt;/Dropdown&gt;</code></pre> &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Dropdown&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -264,52 +281,59 @@ page DropdownDetail {
<div id="dropdown-demo-2" class="demo-canvas demo-canvas--2"> <div id="dropdown-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p> <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
<div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="More actions" icon="icon-[lucide--ellipsis]" showChevron="false" menuLabel="Compact example" width="sm" size="sm" variant="soft" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Compact example" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Dropdown value="sample-2" items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="More actions" ariaLabel="Dropdown 2 example" icon="icon-[lucide--ellipsis]" showChevron="false" menuLabel="Compact example" width="sm" size="sm" variant="soft" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact overflow menu usage"> <section class="demo-code" aria-label="Compact overflow menu usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Dropdown <pre><code>page DropdownExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Open dashboard", "label": "Open dashboard",
"description": "View the operational workspace", "description": "View the operational workspace",
"value": "dashboard", "value": "dashboard",
"icon": "icon-[lucide--layout-dashboard]" "icon": "icon-[lucide--layout-dashboard]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Share record", "label": "Share record",
"value": "share", "value": "share",
"icon": "icon-[lucide--share-2]", "icon": "icon-[lucide--share-2]",
"shortcut": "Ctrl S" "shortcut": "Ctrl S"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"type": "divider" "type": "divider"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Delete record", "label": "Delete record",
"value": "delete", "value": "delete",
"icon": "icon-[lucide--trash-2]", "icon": "icon-[lucide--trash-2]",
"danger": true "danger": true
<span>&#125;</span> <span>&#125;</span>
]' ]
label="More actions" view <span>&#123;</span>
icon="icon-[lucide--ellipsis]" &lt;Dropdown
showChevron="false" value="sample-2"
menuLabel="Compact example" items="<span>&#123;</span>items<span>&#125;</span>"
width="sm" label="More actions"
size="sm" ariaLabel="Dropdown 2 example"
variant="soft" icon="icon-[lucide--ellipsis]"
emptyLabel="Compact example"&gt; showChevron="false"
&lt;div data-slot="trigger"&gt; menuLabel="Compact example"
&lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt; width="sm"
&lt;/div&gt; size="sm"
&lt;div data-slot="header"&gt; variant="soft"
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt; emptyLabel="Compact example"&gt;
&lt;/div&gt; &lt;div data-slot="trigger"&gt;
&lt;div data-slot="footer"&gt; &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div data-slot="header"&gt;
&lt;/Dropdown&gt;</code></pre> &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Dropdown&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -322,51 +346,58 @@ page DropdownDetail {
<div id="dropdown-demo-3" class="demo-canvas demo-canvas--3"> <div id="dropdown-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p> <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p>
<div class="demo-render"><Dropdown items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Review detailed menu" icon="icon-[lucide--trash-2]" showChevron="true" menuLabel="Advanced example" placement="bottom-end" width="xl" size="lg" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Dropdown value="sample-3" items='[{"label":"Open dashboard","description":"View the operational workspace","value":"dashboard","icon":"icon-[lucide--layout-dashboard]"},{"label":"Share record","value":"share","icon":"icon-[lucide--share-2]","shortcut":"Ctrl S"},{"type":"divider"},{"label":"Delete record","value":"delete","icon":"icon-[lucide--trash-2]","danger":true}]' open="false" defaultOpen="false" label="Review detailed menu" ariaLabel="Dropdown 3 example" icon="icon-[lucide--trash-2]" showChevron="true" menuLabel="Advanced example" placement="bottom-end" width="xl" size="lg" variant="raised" closeOnSelect="true" closeOnOutside="true" disabled="false" emptyLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Detailed action menu usage"> <section class="demo-code" aria-label="Detailed action menu usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Dropdown <pre><code>page DropdownExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Open dashboard", "label": "Open dashboard",
"description": "View the operational workspace", "description": "View the operational workspace",
"value": "dashboard", "value": "dashboard",
"icon": "icon-[lucide--layout-dashboard]" "icon": "icon-[lucide--layout-dashboard]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Share record", "label": "Share record",
"value": "share", "value": "share",
"icon": "icon-[lucide--share-2]", "icon": "icon-[lucide--share-2]",
"shortcut": "Ctrl S" "shortcut": "Ctrl S"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"type": "divider" "type": "divider"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Delete record", "label": "Delete record",
"value": "delete", "value": "delete",
"icon": "icon-[lucide--trash-2]", "icon": "icon-[lucide--trash-2]",
"danger": true "danger": true
<span>&#125;</span> <span>&#125;</span>
]' ]
label="Review detailed menu" view <span>&#123;</span>
icon="icon-[lucide--trash-2]" &lt;Dropdown
menuLabel="Advanced example" value="sample-3"
placement="bottom-end" items="<span>&#123;</span>items<span>&#125;</span>"
width="xl" label="Review detailed menu"
size="lg" ariaLabel="Dropdown 3 example"
emptyLabel="Advanced example"&gt; icon="icon-[lucide--trash-2]"
&lt;div data-slot="trigger"&gt; menuLabel="Advanced example"
&lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt; placement="bottom-end"
&lt;/div&gt; width="xl"
&lt;div data-slot="header"&gt; size="lg"
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt; emptyLabel="Advanced example"&gt;
&lt;/div&gt; &lt;div data-slot="trigger"&gt;
&lt;div data-slot="footer"&gt; &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;div data-slot="header"&gt;
&lt;/Dropdown&gt;</code></pre> &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Dropdown&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -399,7 +430,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
console.log("action", payload) console.log("action", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Open menu"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showChevron</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>menuLabel</code></td><td>string</td><td><code>"Dropdown menu"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom-start"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"raised"</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnOutside</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No menu items"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>value</code></td><td>string | number</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Open menu"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showChevron</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>menuLabel</code></td><td>string</td><td><code>"Dropdown menu"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom-start"</code></td><td>No</td></tr><tr><td><code>mobilePanel</code></td><td>string</td><td><code>"sheet"</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"raised"</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnOutside</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No menu items"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#dropdown-demo-1">Action dropdown</a><a href="#dropdown-demo-2">Compact overflow menu</a><a href="#dropdown-demo-3">Detailed action menu</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#dropdown-demo-1">Action dropdown</a><a href="#dropdown-demo-2">Compact overflow menu</a><a href="#dropdown-demo-3">Detailed action menu</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/feature-card.wrn
-211
View File
@@ -1,211 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page FeatureCardDetail {
layout = "showcase"
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_iconStyle = ctx.url.searchParams.get("pg_iconStyle") ?? "soft"
state playground_iconSize = ctx.url.searchParams.get("pg_iconSize") ?? "default"
state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Feature Card example"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default feature card for a modern application."
state playground_image = ctx.url.searchParams.get("pg_image") ?? ""
state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? ""
state playground_imagePosition = ctx.url.searchParams.get("pg_imagePosition") ?? "top"
state playground_imageAspect = ctx.url.searchParams.get("pg_imageAspect") ?? "wide"
state playground_imageLoading = ctx.url.searchParams.get("pg_imageLoading") ?? "lazy"
state playground_href = ctx.url.searchParams.get("pg_href") ?? "#feature-card-demo"
state playground_target = ctx.url.searchParams.get("pg_target") ?? ""
state playground_rel = ctx.url.searchParams.get("pg_rel") ?? ""
state playground_external = (ctx.url.searchParams.get("pg_external") ?? "false") === "true"
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Feature Card"
state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
state playground_showArrow = (ctx.url.searchParams.get("pg_showArrow") ?? "true") === "true"
state playground_stretchedLink = (ctx.url.searchParams.get("pg_stretchedLink") ?? "true") === "true"
state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
state playground_badgeColor = ctx.url.searchParams.get("pg_badgeColor") ?? "primary"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "lift"
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Feature Card"
description = "Present one linked feature or service with media, icon, badge, description, and action."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Feature Card</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Marketing component</span>
<h1>Feature Card</h1>
<p>Present one linked feature or service with media, icon, badge, description, and action.</p>
<div class="detail-badges"><span>28 props</span><span>4 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureCard" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Feature Card</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><FeatureCard icon='{playground_icon}' iconStyle='{playground_iconStyle}' iconSize='{playground_iconSize}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' image='{playground_image}' imageAlt='{playground_imageAlt}' imagePosition='{playground_imagePosition}' imageAspect='{playground_imageAspect}' imageLoading='{playground_imageLoading}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' external='{playground_external}' actionLabel='{playground_actionLabel}' actionIcon='{playground_actionIcon}' showArrow='{playground_showArrow}' stretchedLink='{playground_stretchedLink}' badge='{playground_badge}' badgeColor='{playground_badgeColor}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' hover='{playground_hover}' align='{playground_align}' disabled='{playground_disabled}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;FeatureCard
title="Feature Card example"
description="A polished default feature card for a modern application."
href="#feature-card-demo"
actionLabel="Feature Card"
align="start"&gt;
&lt;div data-slot="media"&gt;
&lt;div class="showcase-slot"&gt;media slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="icon"&gt;
&lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/FeatureCard&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-feature-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-feature-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-feature-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-feature-card-iconSize"><span><strong>icon Size</strong><small>string</small></span><select id="playground-feature-card-iconSize" name="pg_iconSize"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-feature-card-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-feature-card-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-feature-card-title" name="pg_title" type="text" value="Feature Card example" /></label><label class="playground-field" for="playground-feature-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-feature-card-description" name="pg_description" type="text" value="A polished default feature card for a modern application." /></label><label class="playground-field" for="playground-feature-card-image"><span><strong>image</strong><small>string</small></span><input id="playground-feature-card-image" name="pg_image" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-feature-card-imageAlt" name="pg_imageAlt" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-imagePosition"><span><strong>image Position</strong><small>string</small></span><select id="playground-feature-card-imagePosition" name="pg_imagePosition"><option value="top" selected>top</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-feature-card-imageAspect"><span><strong>image Aspect</strong><small>string</small></span><select id="playground-feature-card-imageAspect" name="pg_imageAspect"><option value="wide" selected>wide</option><option value="square">square</option><option value="video">video</option><option value="portrait">portrait</option></select></label><label class="playground-field" for="playground-feature-card-imageLoading"><span><strong>image Loading</strong><small>string</small></span><input id="playground-feature-card-imageLoading" name="pg_imageLoading" type="text" value="lazy" /></label><label class="playground-field" for="playground-feature-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-feature-card-href" name="pg_href" type="text" value="#feature-card-demo" /></label><label class="playground-field" for="playground-feature-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-feature-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-feature-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-feature-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-feature-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-feature-card-actionLabel" name="pg_actionLabel" type="text" value="Feature Card" /></label><label class="playground-field" for="playground-feature-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-feature-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-card-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-feature-card-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></Line truncated
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Linked service card</h2><p>Present one service with an icon, hierarchy, badge, and clear action.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="feature-card-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" /></div>
</div>
<section class="demo-code" aria-label="Linked service card usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FeatureCard
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"
align="start"&gt;
&lt;div data-slot="media"&gt;
&lt;div class="showcase-slot"&gt;media slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="icon"&gt;
&lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/FeatureCard&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Image-led feature card</h2><p>Use a visual preview for products, campaigns, dashboards, or service explanations.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="feature-card-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FeatureCard icon="icon-[lucide--arrow-right]" title="Unified citizen portal" description="Access trusted services from one responsive interface." image="/showcase-images/dashboard-preview.svg" imageAlt="Abstract dashboard preview" imagePosition="top" imageAspect="wide" href="#portal" external="false" actionLabel="Open portal" showArrow="true" stretchedLink="true" badge="Featured" size="sm" color="info" variant="raised" align="center" disabled="false" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Image-led feature card usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FeatureCard
icon="icon-[lucide--arrow-right]"
title="Unified citizen portal"
description="Access trusted services from one responsive interface."
image="/showcase-images/dashboard-preview.svg"
imageAlt="Abstract dashboard preview"
href="#portal"
actionLabel="Open portal"
badge="Featured"
size="sm"
color="info"
variant="raised"
align="center"&gt;
&lt;div data-slot="media"&gt;
&lt;div class="showcase-slot"&gt;media slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="icon"&gt;
&lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/FeatureCard&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Solid callout card</h2><p>Use stronger contrast for a featured capability or high-priority service.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="feature-card-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FeatureCard icon="icon-[lucide--siren]" eyebrow="Emergency" title="Get urgent help" description="Find verified emergency contacts and immediate safety guidance." href="#emergency" external="false" actionLabel="View emergency help" showArrow="true" stretchedLink="true" badge="Important" size="lg" color="danger" variant="solid" hover="glow" align="end" disabled="false" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Solid callout card usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FeatureCard
icon="icon-[lucide--siren]"
eyebrow="Emergency"
title="Get urgent help"
description="Find verified emergency contacts and immediate safety guidance."
href="#emergency"
actionLabel="View emergency help"
badge="Important"
size="lg"
color="danger"
variant="solid"
hover="glow"
align="end"&gt;
&lt;div data-slot="media"&gt;
&lt;div class="showcase-slot"&gt;media slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="icon"&gt;
&lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/FeatureCard&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>iconSize</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Feature"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>image</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imageAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imagePosition</code></td><td>string</td><td><code>"top"</code></td><td>No</td></tr><tr><td><code>imageAspect</code></td><td>string</td><td><code>"wide"</code></td><td>No</td></tr><tr><td><code>imageLoading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>"Learn more"</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>stretchedLink</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeColor</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-card-demo-1">Linked service card</a><a href="#feature-card-demo-2">Image-led feature card</a><a href="#feature-card-demo-3">Solid callout card</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/ctasection"><small>Previous</small><strong>← CTASection</strong></a>
<a href="/components/feature-icon-card"><small>Next</small><strong>Feature Icon Card →</strong></a>
</nav>
}
}
app/pages/components/feature-grid.wrn
-408
View File
@@ -1,408 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page FeatureGridDetail {
layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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\"}]")
state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2")
state playground_mobileColumns = Number(ctx.url.searchParams.get("pg_mobileColumns") ?? "1")
state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
state playground_minItemWidth = ctx.url.searchParams.get("pg_minItemWidth") ?? ""
state playground_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "true") === "true"
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Feature Grid"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Feature Grid"
description = "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Feature Grid</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Layout component</span>
<h1>Feature Grid</h1>
<p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p>
<div class="detail-badges"><span>14 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureGrid" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Feature Grid</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><FeatureGrid size='{playground_size}' color='{playground_color}' items='{playground_items}' columns='{playground_columns}' tabletColumns='{playground_tabletColumns}' mobileColumns='{playground_mobileColumns}' gap='{playground_gap}' minItemWidth='{playground_minItemWidth}' equalHeight='{playground_equalHeight}' align='{playground_align}' maxWidth='{playground_maxWidth}' variant='{playground_variant}' label='{playground_label}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;FeatureGrid
items='[
<span>&#123;</span>
"id": "feature-grid-0-1",
"key": "feature-grid-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": "#feature-grid-demo",
"actionHref": "#feature-grid-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "feature-grid-0-2",
"key": "feature-grid-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#feature-grid-demo",
"actionHref": "#feature-grid-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
align="start"
label="Feature Grid"
/&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-feature-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-feature-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-feature-grid-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-feature-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123;
"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"
&#125;,
&#123;
"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"
&#125;,
&#123;
"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"
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-feature-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-feature-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-feature-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-feature-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-feature-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-feature-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-feature-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-feature-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-feature-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-feature-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-grid-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-grid-align" name="pg_align"><option value="start" selected>start</option><option value="stretch">stretch</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-feature-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-feature-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-feature-grid-label"><span><strong>label</strong><small>string</small></span><input id="playground-feature-grid-label" name="pg_label" type="text" value="Feature Grid" /></label><label class="playground-field" for="playground-feature-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Three-column service grid</h2><p>Arrange services or capabilities as equal-height responsive cards.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="feature-grid-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" /></div>
</div>
<section class="demo-code" aria-label="Three-column service grid usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FeatureGrid
items='[
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"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"
<span>&#125;</span>
]'
gap="lg"
align="start"
label="Feature Grid"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Compact four-column grid</h2><p>Use smaller gaps and four columns for short benefit or capability cards.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="feature-grid-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FeatureGrid size="sm" 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"},{"icon":"icon-[lucide--file-check-2]","title":"Certificates","description":"Request and track certificates online.","href":"#certificates","color":"warning"}]' columns="4" tabletColumns="2" mobileColumns="1" gap="sm" equalHeight="true" align="center" variant="soft" label="Compact example" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact four-column grid usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FeatureGrid
size="sm"
items='[
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"icon": "icon-[lucide--file-check-2]",
"title": "Certificates",
"description": "Request and track certificates online.",
"href": "#certificates",
"color": "warning"
<span>&#125;</span>
]'
columns="4"
gap="sm"
align="center"
variant="soft"
label="Compact example"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Auto-fit feature collection</h2><p>Let cards wrap automatically according to a minimum useful width.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="feature-grid-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FeatureGrid size="lg" 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="xl" minItemWidth="18rem" equalHeight="true" align="end" maxWidth="wide" variant="panel" label="Advanced example" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Auto-fit feature collection usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FeatureGrid
size="lg"
items='[
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"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"
<span>&#125;</span>
]'
gap="xl"
minItemWidth="18rem"
align="end"
maxWidth="wide"
variant="panel"
label="Advanced example"
/&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>tabletColumns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>mobileColumns</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>equalHeight</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"stretch"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Features"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-grid-demo-1">Three-column service grid</a><a href="#feature-grid-demo-2">Compact four-column grid</a><a href="#feature-grid-demo-3">Auto-fit feature collection</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/divider"><small>Previous</small><strong>← Divider</strong></a>
<a href="/components/footer"><small>Next</small><strong>Footer →</strong></a>
</nav>
}
}
app/pages/components/feature-icon-card.wrn
-167
View File
@@ -1,167 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page FeatureIconCardDetail {
layout = "showcase"
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_iconSize = ctx.url.searchParams.get("pg_iconSize") ?? "md"
state playground_iconVariant = ctx.url.searchParams.get("pg_iconVariant") ?? "soft"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Feature Icon Card example"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default feature icon card for a modern application."
state playground_href = ctx.url.searchParams.get("pg_href") ?? "#feature-icon-card-demo"
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Feature Icon Card"
state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "lift"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Feature Icon Card"
description = "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Feature Icon Card</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Marketing component</span>
<h1>Feature Icon Card</h1>
<p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p>
<div class="detail-badges"><span>14 props</span><span>2 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureIconCard" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Feature Icon Card</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><FeatureIconCard icon='{playground_icon}' iconSize='{playground_iconSize}' iconVariant='{playground_iconVariant}' title='{playground_title}' description='{playground_description}' href='{playground_href}' actionLabel='{playground_actionLabel}' badge='{playground_badge}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' align='{playground_align}' hover='{playground_hover}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;FeatureIconCard
title="Feature Icon Card example"
description="A polished default feature icon card for a modern application."
href="#feature-icon-card-demo"
actionLabel="Feature Icon Card"
align="start"&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/FeatureIconCard&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-feature-icon-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-feature-icon-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-feature-icon-card-iconSize"><span><strong>icon Size</strong><small>string</small></span><select id="playground-feature-icon-card-iconSize" name="pg_iconSize"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-feature-icon-card-iconVariant"><span><strong>icon Variant</strong><small>string</small></span><select id="playground-feature-icon-card-iconVariant" name="pg_iconVariant"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-feature-icon-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-feature-icon-card-title" name="pg_title" type="text" value="Feature Icon Card example" /></label><label class="playground-field" for="playground-feature-icon-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-feature-icon-card-description" name="pg_description" type="text" value="A polished default feature icon card for a modern application." /></label><label class="playground-field" for="playground-feature-icon-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-feature-icon-card-href" name="pg_href" type="text" value="#feature-icon-card-demo" /></label><label class="playground-field" for="playground-feature-icon-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-feature-icon-card-actionLabel" name="pg_actionLabel" type="text" value="Feature Icon Card" /></label><label class="playground-field" for="playground-feature-icon-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-feature-icon-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-feature-icon-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-icon-card-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-feature-icon-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-icon-card-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-feature-icon-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-icon-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-feature-icon-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-icon-card-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-feature-icon-card-hover"><span><strong>hover</strong><small>string</small></span><select id="playground-feature-icon-card-hover" name="pg_hover"><option value="lift" selected>lift</option><option value="none">none</option><option value="border">border</option><option value="glow">glow</option></select></label><label class="playground-field" for="playground-feature-icon-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-icon-card-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Icon-led capability card</h2><p>Use a compact card for one feature, benefit, or linked capability.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="feature-icon-card-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Icon-led capability card usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;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"
align="start"&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/FeatureIconCard&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Centered benefit card</h2><p>Center the content for short benefit grids and campaign proof points.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="feature-icon-card-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FeatureIconCard icon="icon-[lucide--gauge]" iconVariant="solid" title="Fast rendering" description="Server-first output with focused client behavior." href="#feature-icon-card-demo" actionLabel="Compact example" size="compact" color="info" variant="secondary" align="center" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Centered benefit card usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FeatureIconCard
icon="icon-[lucide--gauge]"
iconVariant="solid"
title="Fast rendering"
description="Server-first output with focused client behavior."
href="#feature-icon-card-demo"
actionLabel="Compact example"
size="compact"
color="info"
variant="secondary"
align="center"&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/FeatureIconCard&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Highlighted linked card</h2><p>Use a stronger raised treatment for a featured capability.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="feature-icon-card-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FeatureIconCard icon="icon-[lucide--workflow]" title="Composable workflows" description="Connect forms, services, data, and actions without duplicating UI." href="#workflows" actionLabel="Explore workflows" size="lg" color="success" variant="raised" align="end" hover="lift" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Highlighted linked card usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FeatureIconCard
icon="icon-[lucide--workflow]"
title="Composable workflows"
description="Connect forms, services, data, and actions without duplicating UI."
href="#workflows"
actionLabel="Explore workflows"
size="lg"
color="success"
variant="raised"
align="end"&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/FeatureIconCard&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--sparkles]"</code></td><td>No</td></tr><tr><td><code>iconSize</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>iconVariant</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Feature"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>"Explore"</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-icon-card-demo-1">Icon-led capability card</a><a href="#feature-icon-card-demo-2">Centered benefit card</a><a href="#feature-icon-card-demo-3">Highlighted linked card</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/feature-card"><small>Previous</small><strong>← Feature Card</strong></a>
<a href="/components/hero"><small>Next</small><strong>Hero →</strong></a>
</nav>
}
}
app/pages/components/file-input.wrn
+25 -22
View File
@@ -67,44 +67,46 @@ page FileInputDetail {
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list"> <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div> <div><span class="demo-case-eyebrow">Recommended</span><h2>Choose a document</h2><p>Select a PDF or image. The selected filename replaces the placeholder.</p></div>
<span class="demo-case-number">01</span> <span class="demo-case-number">01</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="file-input-demo-1" class="demo-canvas demo-canvas--1"> <div id="file-input-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FileInput size="default" label="File Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" icon="" multiple="false" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><FileInput size="default" name="attachment" label="Attachment" hiddenLabel="false" placeholder="Choose a file" value="" icon="" accept=".pdf,image/*" multiple="false" helperText="PDF or image" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Choose a document usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FileInput <pre><code>&lt;FileInput
label="File Input" name="attachment"
placeholder="Enter a sample value" label="Attachment"
value="sample-1" accept=".pdf,image/*"
helperText="PDF or image"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div> <div><span class="demo-case-eyebrow">Compact</span><h2>Multiple attachments</h2><p>Select several files; each filename is shown in the control.</p></div>
<span class="demo-case-number">02</span> <span class="demo-case-number">02</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="file-input-demo-2" class="demo-canvas demo-canvas--2"> <div id="file-input-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FileInput size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" icon="icon-[lucide--arrow-right]" multiple="false" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><FileInput size="sm" name="attachments" label="Attachments" hiddenLabel="false" placeholder="Choose files" value="" icon="icon-[lucide--arrow-right]" multiple="true" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Multiple attachments usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FileInput <pre><code>&lt;FileInput
size="sm" size="sm"
label="Compact example" name="attachments"
placeholder="Enter a sample value" label="Attachments"
value="sample-2" placeholder="Choose files"
icon="icon-[lucide--arrow-right]" icon="icon-[lucide--arrow-right]"
multiple="true"
variant="secondary" variant="secondary"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
@@ -112,24 +114,25 @@ page FileInputDetail {
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div> <div><span class="demo-case-eyebrow">Advanced</span><h2>Disabled upload</h2><p>A disabled control cannot open the file chooser.</p></div>
<span class="demo-case-number">03</span> <span class="demo-case-number">03</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="file-input-demo-3" class="demo-canvas demo-canvas--3"> <div id="file-input-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FileInput size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><FileInput size="lg" name="disabled-file" label="Attachment" hiddenLabel="false" placeholder="Uploads unavailable" value="" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="true" required="false" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Disabled upload usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FileInput <pre><code>&lt;FileInput
size="lg" size="lg"
label="Advanced example" name="disabled-file"
placeholder="Search by name, email, or identifier" label="Attachment"
value="sample-3" placeholder="Uploads unavailable"
icon="icon-[lucide--trash-2]" icon="icon-[lucide--trash-2]"
variant="success" variant="success"
disabled="true"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -176,7 +179,7 @@ if (component) registerOutputHandler(component, "invalid", (payload) =&gt; <span
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"File"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Choose a file"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--upload]"</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>accept</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"File"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Choose a file"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--upload]"</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>accept</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-input-demo-1">Production default</a><a href="#file-input-demo-2">Compact application</a><a href="#file-input-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-input-demo-1">Choose a document</a><a href="#file-input-demo-2">Multiple attachments</a><a href="#file-input-demo-3">Disabled upload</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/file-upload-progress.wrn
+37 -37
View File
@@ -3,17 +3,18 @@ page FileUploadProgressDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Upload Progress" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Upload progress"
state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36") state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "50")
state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100") state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true" state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? "" state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? "brand-guidelines.pdf"
state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? "" state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? "4.8 MB"
state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? "" state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? "2.4 MB"
state playground_status = ctx.url.searchParams.get("pg_status") ?? "uploading" state playground_status = ctx.url.searchParams.get("pg_status") ?? "uploading"
state playground_cancelLabel = ctx.url.searchParams.get("pg_cancelLabel") ?? "File Upload Progress" state playground_cancelLabel = ctx.url.searchParams.get("pg_cancelLabel") ?? "Cancel upload"
state playground_retryLabel = ctx.url.searchParams.get("pg_retryLabel") ?? "File Upload Progress" state playground_retryLabel = ctx.url.searchParams.get("pg_retryLabel") ?? "Retry upload"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_showCompleteAction = (ctx.url.searchParams.get("pg_showCompleteAction") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "File Upload Progress" title = "File Upload Progress"
description = "Theme-aware, responsive file upload progress component." description = "Theme-aware, responsive file upload progress component."
@@ -27,7 +28,7 @@ page FileUploadProgressDetail {
<span class="showcase-eyebrow">Base component</span> <span class="showcase-eyebrow">Base component</span>
<h1>File Upload Progress</h1> <h1>File Upload Progress</h1>
<p>Theme-aware, responsive file upload progress component.</p> <p>Theme-aware, responsive file upload progress component.</p>
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>14 props</span><span>0 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -36,22 +37,22 @@ page FileUploadProgressDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><FileUploadProgress size='{playground_size}' color='{playground_color}' label='{playground_label}' value='{playground_value}' max='{playground_max}' showValue='{playground_showValue}' fileName='{playground_fileName}' fileSize='{playground_fileSize}' uploadedSize='{playground_uploadedSize}' status='{playground_status}' cancelLabel='{playground_cancelLabel}' retryLabel='{playground_retryLabel}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><FileUploadProgress size='{playground_size}' color='{playground_color}' label='{playground_label}' value='{playground_value}' max='{playground_max}' showValue='{playground_showValue}' fileName='{playground_fileName}' fileSize='{playground_fileSize}' uploadedSize='{playground_uploadedSize}' status='{playground_status}' cancelLabel='{playground_cancelLabel}' retryLabel='{playground_retryLabel}' showCompleteAction='{playground_showCompleteAction}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;FileUploadProgress <pre><code data-playground-code>&lt;FileUploadProgress
label="File Upload Progress" label="Upload progress"
value="36" fileName="brand-guidelines.pdf"
cancelLabel="File Upload Progress" fileSize="4.8 MB"
retryLabel="File Upload Progress" uploadedSize="2.4 MB"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-file-upload-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-upload-progress-label" name="pg_label" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-file-upload-progress-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-file-upload-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-file-upload-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-file-upload-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-file-upload-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-fileName"><span><strong>file Name</strong><small>string</small></span><input id="playground-file-upload-progress-fileName" name="pg_fileName" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-fileSize"><span><strong>file Size</strong><small>string</small></span><input id="playground-file-upload-progress-fileSize" name="pg_fileSize" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-uploadedSize"><span><strong>uploaded Size</strong><small>string</small></span><input id="playground-file-upload-progress-uploadedSize" name="pg_uploadedSize" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-status"><span><strong>status</strong><small>string</small></span><input id="playground-file-upload-progress-status" name="pg_status" type="text" value="uploading" /></label><label class="playground-field" for="playground-file-upload-progress-cancelLabel"><span><strong>cancel Label</strong><small>string</small></span><input id="playground-file-upload-progress-cancelLabel" name="pg_cancelLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-file-upload-progress-retryLabel" name="pg_retryLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-progress-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-file-upload-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-upload-progress-label" name="pg_label" type="text" value="Upload progress" /></label><label class="playground-field" for="playground-file-upload-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-file-upload-progress-value" name="pg_value" type="number" value="50" /></label><label class="playground-field" for="playground-file-upload-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-file-upload-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-file-upload-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-file-upload-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-fileName"><span><strong>file Name</strong><small>string</small></span><input id="playground-file-upload-progress-fileName" name="pg_fileName" type="text" value="brand-guidelines.pdf" /></label><label class="playground-field" for="playground-file-upload-progress-fileSize"><span><strong>file Size</strong><small>string</small></span><input id="playground-file-upload-progress-fileSize" name="pg_fileSize" type="text" value="4.8 MB" /></label><label class="playground-field" for="playground-file-upload-progress-uploadedSize"><span><strong>uploaded Size</strong><small>string</small></span><input id="playground-file-upload-progress-uploadedSize" name="pg_uploadedSize" type="text" value="2.4 MB" /></label><label class="playground-field" for="playground-file-upload-progress-status"><span><strong>status</strong><small>string</small></span><input id="playground-file-upload-progress-status" name="pg_status" type="text" value="uploading" /></label><label class="playground-field" for="playground-file-upload-progress-cancelLabel"><span><strong>cancel Label</strong><small>string</small></span><input id="playground-file-upload-progress-cancelLabel" name="pg_cancelLabel" type="text" value="Cancel upload" /></label><label class="playground-field" for="playground-file-upload-progress-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-file-upload-progress-retryLabel" name="pg_retryLabel" type="text" value="Retry upload" /></label><label class="playground-toggle" for="playground-file-upload-progress-showCompleteAction"><span><strong>show Complete Action</strong><small>boolean</small></span><input id="playground-file-upload-progress-showCompleteAction" name="pg_showCompleteAction" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-progress-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -66,16 +67,16 @@ page FileUploadProgressDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="file-upload-progress-demo-1" class="demo-canvas demo-canvas--1"> <div id="file-upload-progress-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FileUploadProgress size="default" label="File Upload Progress" value="36" max="100" showValue="true" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="2.4 MB" status="uploading" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FileUploadProgress <pre><code>&lt;FileUploadProgress
label="File Upload Progress" label="Upload progress"
value="36" fileName="brand-guidelines.pdf"
cancelLabel="File Upload Progress" fileSize="4.8 MB"
retryLabel="File Upload Progress" uploadedSize="2.4 MB"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -88,17 +89,16 @@ page FileUploadProgressDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="file-upload-progress-demo-2" class="demo-canvas demo-canvas--2"> <div id="file-upload-progress-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FileUploadProgress size="sm" label="Compact example" value="60" max="100" showValue="true" cancelLabel="Compact example" retryLabel="Compact example" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="error" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FileUploadProgress <pre><code>&lt;FileUploadProgress
size="sm" label="Upload progress"
label="Compact example" fileName="brand-guidelines.pdf"
value="60" fileSize="4.8 MB"
cancelLabel="Compact example" status="error"
retryLabel="Compact example"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -111,17 +111,17 @@ page FileUploadProgressDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="file-upload-progress-demo-3" class="demo-canvas demo-canvas--3"> <div id="file-upload-progress-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><FileUploadProgress size="lg" label="Advanced example" value="84" max="100" showValue="true" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="100" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="complete" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;FileUploadProgress <pre><code>&lt;FileUploadProgress
size="lg" label="Upload progress"
label="Advanced example" value="100"
value="84" fileName="brand-guidelines.pdf"
cancelLabel="Advanced example" fileSize="4.8 MB"
retryLabel="Advanced example" status="complete"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -145,7 +145,7 @@ if (component) registerOutputHandler(component, "retry", (payload) =&gt; <span>&
if (component) registerOutputHandler(component, "complete", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "complete", (payload) =&gt; <span>&#123;</span>
console.log("complete", payload) console.log("complete", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fileName</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>fileSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>uploadedSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>"uploading"</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel upload"</code></td><td>No</td></tr><tr><td><code>retryLabel</code></td><td>string</td><td><code>"Retry upload"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fileName</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>fileSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>uploadedSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>"uploading"</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel upload"</code></td><td>No</td></tr><tr><td><code>retryLabel</code></td><td>string</td><td><code>"Retry upload"</code></td><td>No</td></tr><tr><td><code>showCompleteAction</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-progress-demo-1">Production default</a><a href="#file-upload-progress-demo-2">Compact application</a><a href="#file-upload-progress-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-progress-demo-1">Production default</a><a href="#file-upload-progress-demo-2">Compact application</a><a href="#file-upload-progress-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/footer.wrn
-575
View File
@@ -1,575 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page FooterDetail {
layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Footer"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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}]}]")
state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "4")
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "wide"
state playground_copyright = ctx.url.searchParams.get("pg_copyright") ?? ""
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Footer"
description = "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Footer</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Layout component</span>
<h1>Footer</h1>
<p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p>
<div class="detail-badges"><span>8 props</span><span>4 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Footer" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,action">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Footer</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Footer size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' columns='{playground_columns}' maxWidth='{playground_maxWidth}' copyright='{playground_copyright}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Footer
label="Footer"
items='[
<span>&#123;</span>
"id": "footer-0-1",
"key": "footer-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": "#footer-demo",
"actionHref": "#footer-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "footer-0-2",
"key": "footer-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#footer-demo",
"actionHref": "#footer-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'&gt;
&lt;div data-slot="pre-footer"&gt;
&lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="post-footer"&gt;
&lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="copyright-left"&gt;
&lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="copyright-right"&gt;
&lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Footer&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-footer-size"><span><strong>size</strong><small>string</small></span><select id="playground-footer-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-footer-color"><span><strong>color</strong><small>string</small></span><select id="playground-footer-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-footer-label"><span><strong>label</strong><small>string</small></span><input id="playground-footer-label" name="pg_label" type="text" value="Footer" /></label><label class="playground-field" for="playground-footer-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123;
"type": "header",
"label": "Product",
"description": "Build consistent interfaces with WRNexusJS.",
"items": [
&#123;
"label": "Components",
"href": "/base"
&#125;,
&#123;
"label": "Themes",
"href": "/themes"
&#125;,
&#123;
"label": "Examples",
"href": "/blocks"
&#125;
]
&#125;,
&#123;
"type": "header",
"label": "Developers",
"items": [
&#123;
"label": "Documentation",
"href": "/docs"
&#125;,
&#123;
"label": "Installation",
"href": "/installation"
&#125;,
&#123;
"label": "Framework guides",
"href": "/framework-guides"
&#125;
]
&#125;,
&#123;
"type": "header",
"label": "Resources",
"items": [
&#123;
"label": "Accessibility",
"href": "/accessibility"
&#125;,
&#123;
"label": "Design tokens",
"href": "/colors"
&#125;,
&#123;
"label": "Typography",
"href": "/fonts"
&#125;
]
&#125;,
&#123;
"type": "header",
"label": "Company",
"items": [
&#123;
"label": "WorkRoot",
"href": "https://workroot.in",
"external": true
&#125;,
&#123;
"label": "WRNexusJS",
"href": "https://wrnexusjs.dev",
"external": true
&#125;
]
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-footer-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-footer-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-field" for="playground-footer-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-footer-maxWidth" name="pg_maxWidth"><option value="wide" selected>wide</option><option value="compact">compact</option><option value="xl">xl</option><option value="full">full</option><option value="lg">lg</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-footer-copyright"><span><strong>copyright</strong><small>string</small></span><input id="playground-footer-copyright" name="pg_copyright" type="text" value="" /></label><label class="playground-field" for="playground-footer-class"><span><strong>class</strong><small>string</small></span><input id="playground-footer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Four-column public footer</h2><p>Organize product, developer, resource, and company links into responsive columns.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="footer-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Four-column public footer usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Footer
label="Footer"
items='[
<span>&#123;</span>
"type": "header",
"label": "Product",
"description": "Build consistent interfaces with WRNexusJS.",
"items": [
<span>&#123;</span>
"label": "Components",
"href": "/base"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Themes",
"href": "/themes"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Examples",
"href": "/blocks"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"type": "header",
"label": "Developers",
"items": [
<span>&#123;</span>
"label": "Documentation",
"href": "/docs"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Installation",
"href": "/installation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Framework guides",
"href": "/framework-guides"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"type": "header",
"label": "Resources",
"items": [
<span>&#123;</span>
"label": "Accessibility",
"href": "/accessibility"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Design tokens",
"href": "/colors"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Typography",
"href": "/fonts"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"type": "header",
"label": "Company",
"items": [
<span>&#123;</span>
"label": "WorkRoot",
"href": "https://workroot.in",
"external": true
<span>&#125;</span>,
<span>&#123;</span>
"label": "WRNexusJS",
"href": "https://wrnexusjs.dev",
"external": true
<span>&#125;</span>
]
<span>&#125;</span>
]'
columns="4"
maxWidth="wide"
copyright="© 2026 WRNexusJS. All rights reserved."&gt;
&lt;div data-slot="pre-footer"&gt;
&lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="post-footer"&gt;
&lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="copyright-left"&gt;
&lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="copyright-right"&gt;
&lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Footer&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Compact application footer</h2><p>Use fewer columns and reduced spacing inside product applications.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="footer-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Footer size="compact" label="Compact example" 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"}]}]' columns="3" maxWidth="compact" copyright="WRNexusJS component showcase" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact application footer usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Footer
size="compact"
label="Compact example"
items='[
<span>&#123;</span>
"type": "header",
"label": "Product",
"description": "Build consistent interfaces with WRNexusJS.",
"items": [
<span>&#123;</span>
"label": "Components",
"href": "/base"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Themes",
"href": "/themes"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Examples",
"href": "/blocks"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"type": "header",
"label": "Developers",
"items": [
<span>&#123;</span>
"label": "Documentation",
"href": "/docs"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Installation",
"href": "/installation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Framework guides",
"href": "/framework-guides"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"type": "header",
"label": "Resources",
"items": [
<span>&#123;</span>
"label": "Accessibility",
"href": "/accessibility"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Design tokens",
"href": "/colors"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Typography",
"href": "/fonts"
<span>&#125;</span>
]
<span>&#125;</span>
]'
copyright="WRNexusJS component showcase"&gt;
&lt;div data-slot="pre-footer"&gt;
&lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="post-footer"&gt;
&lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="copyright-left"&gt;
&lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="copyright-right"&gt;
&lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Footer&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width footer with slots</h2><p>Compose pre-footer, post-footer, and legal content around structured navigation.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="footer-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Footer size="spacious" label="Advanced example" 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="full" copyright="Built with WRNexusJS" class="showcase-instance showcase-instance--3"><div data-slot="pre-footer"><div class="showcase-footer-banner"><strong>Stay informed</strong><a href="#notifications">Manage notifications</a></div></div><div data-slot="copyright-right"><div class="showcase-footer-legal"><a href="#privacy">Privacy</a><a href="#terms">Terms</a></div></div></Footer></div>
</div>
<section class="demo-code" aria-label="Full-width footer with slots usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Footer
size="spacious"
label="Advanced example"
items='[
<span>&#123;</span>
"type": "header",
"label": "Product",
"description": "Build consistent interfaces with WRNexusJS.",
"items": [
<span>&#123;</span>
"label": "Components",
"href": "/base"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Themes",
"href": "/themes"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Examples",
"href": "/blocks"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"type": "header",
"label": "Developers",
"items": [
<span>&#123;</span>
"label": "Documentation",
"href": "/docs"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Installation",
"href": "/installation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Framework guides",
"href": "/framework-guides"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"type": "header",
"label": "Resources",
"items": [
<span>&#123;</span>
"label": "Accessibility",
"href": "/accessibility"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Design tokens",
"href": "/colors"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Typography",
"href": "/fonts"
<span>&#125;</span>
]
<span>&#125;</span>,
<span>&#123;</span>
"type": "header",
"label": "Company",
"items": [
<span>&#123;</span>
"label": "WorkRoot",
"href": "https://workroot.in",
"external": true
<span>&#125;</span>,
<span>&#123;</span>
"label": "WRNexusJS",
"href": "https://wrnexusjs.dev",
"external": true
<span>&#125;</span>
]
<span>&#125;</span>
]'
columns="4"
maxWidth="full"
copyright="Built with WRNexusJS"&gt;
&lt;div data-slot="pre-footer"&gt;
&lt;div class="showcase-footer-banner"&gt;&lt;strong&gt;Stay informed&lt;/strong&gt;&lt;a href="#notifications"&gt;Manage notifications&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="post-footer"&gt;
&lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="copyright-left"&gt;
&lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="copyright-right"&gt;
&lt;div class="showcase-footer-legal"&gt;&lt;a href="#privacy"&gt;Privacy&lt;/a&gt;&lt;a href="#terms"&gt;Terms&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/Footer&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@action</code><span>Fires when the component's primary or item action is activated.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Footer
@select='console.log(payload)'
@action='console.log(payload)'
/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"Footer\"], [data-component=\"Footer\"]")
if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
console.log("select", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
console.log("action", payload)
<span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Footer navigation"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>copyright</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#footer-demo-1">Four-column public footer</a><a href="#footer-demo-2">Compact application footer</a><a href="#footer-demo-3">Full-width footer with slots</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/feature-grid"><small>Previous</small><strong>← Feature Grid</strong></a>
<a href="/components/grid"><small>Next</small><strong>Grid →</strong></a>
</nav>
}
}
app/pages/components/grid.wrn
+6 -6
View File
@@ -36,7 +36,7 @@ page GridDetail {
<pre><code data-playground-code>&lt;Grid /&gt;</code></pre> <pre><code data-playground-code>&lt;Grid /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -55,7 +55,7 @@ page GridDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="grid-demo-1" class="demo-canvas demo-canvas--1"> <div id="grid-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Grid size="default" columns="3" gap="md" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div> <div class="demo-render"><Grid size="default" columns="3" gap="md" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
</div> </div>
<section class="demo-code" aria-label="Responsive three-column grid usage"> <section class="demo-code" aria-label="Responsive three-column grid usage">
@@ -75,7 +75,7 @@ page GridDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="grid-demo-2" class="demo-canvas demo-canvas--2"> <div id="grid-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Grid size="compact" columns="4" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div></Grid></div> <div class="demo-render"><Grid size="compact" columns="4" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div></Grid></div>
</div> </div>
<section class="demo-code" aria-label="Dense four-column grid usage"> <section class="demo-code" aria-label="Dense four-column grid usage">
@@ -98,7 +98,7 @@ page GridDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="grid-demo-3" class="demo-canvas demo-canvas--3"> <div id="grid-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Grid size="spacious" columns="2" gap="xl" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div></Grid></div> <div class="demo-render"><Grid size="spacious" columns="2" gap="xl" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div></Grid></div>
</div> </div>
<section class="demo-code" aria-label="Full-width two-column grid usage"> <section class="demo-code" aria-label="Full-width two-column grid usage">
@@ -112,7 +112,7 @@ page GridDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
@@ -120,7 +120,7 @@ page GridDetail {
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
<a href="/components/footer"><small>Previous</small><strong>← Footer</strong></a> <a href="/components/divider"><small>Previous</small><strong>← Divider</strong></a>
<a href="/components/image"><small>Next</small><strong>Image →</strong></a> <a href="/components/image"><small>Next</small><strong>Image →</strong></a>
</nav> </nav>
} }
app/pages/components/hero-actions.wrn
-293
View File
@@ -1,293 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page HeroActionsDetail {
layout = "showcase"
state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_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\"}]")
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
state playground_stackOnMobile = (ctx.url.searchParams.get("pg_stackOnMobile") ?? "true") === "true"
state playground_fullWidthMobile = (ctx.url.searchParams.get("pg_fullWidthMobile") ?? "true") === "true"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Hero Actions"
description = "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Hero Actions</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Marketing component</span>
<h1>Hero Actions</h1>
<p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p>
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="HeroActions" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Hero Actions</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><HeroActions actions='{playground_actions}' align='{playground_align}' orientation='{playground_orientation}' stackOnMobile='{playground_stackOnMobile}' fullWidthMobile='{playground_fullWidthMobile}' size='{playground_size}' color='{playground_color}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;HeroActions
actions='[
<span>&#123;</span>
"id": "hero-actions-0-1",
"key": "hero-actions-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-actions-demo",
"actionHref": "#hero-actions-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "hero-actions-0-2",
"key": "hero-actions-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-actions-demo",
"actionHref": "#hero-actions-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
align="start"
/&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-hero-actions-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-hero-actions-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
&#123;
"label": "Browse components",
"href": "#components",
"icon": "icon-[lucide--blocks]",
"variant": "primary"
&#125;,
&#123;
"label": "View metrics",
"href": "#metrics",
"icon": "icon-[lucide--chart-no-axes-column-increasing]",
"variant": "outline"
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-actions-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-actions-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-actions-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-hero-actions-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-hero-actions-stackOnMobile"><span><strong>stack On Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-stackOnMobile" name="pg_stackOnMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-actions-fullWidthMobile"><span><strong>full Width Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-fullWidthMobile" name="pg_fullWidthMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-actions-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-actions-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-actions-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-actions-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-actions-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-actions-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Primary and secondary actions</h2><p>Group the most important hero actions with consistent spacing and hierarchy.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="hero-actions-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" /></div>
</div>
<section class="demo-code" aria-label="Primary and secondary actions usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;HeroActions
actions='[
<span>&#123;</span>
"label": "Browse components",
"href": "#components",
"icon": "icon-[lucide--blocks]",
"variant": "primary"
<span>&#125;</span>,
<span>&#123;</span>
"label": "View metrics",
"href": "#metrics",
"icon": "icon-[lucide--chart-no-axes-column-increasing]",
"variant": "outline"
<span>&#125;</span>
]'
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Centered campaign actions</h2><p>Center actions beneath a stacked hero or CTA message.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="hero-actions-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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="center" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="sm" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Centered campaign actions usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;HeroActions
actions='[
<span>&#123;</span>
"label": "Browse components",
"href": "#components",
"icon": "icon-[lucide--blocks]",
"variant": "primary"
<span>&#125;</span>,
<span>&#123;</span>
"label": "View metrics",
"href": "#metrics",
"icon": "icon-[lucide--chart-no-axes-column-increasing]",
"variant": "outline"
<span>&#125;</span>
]'
align="center"
size="sm"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Vertical mobile-first actions</h2><p>Use a vertical group for narrow panels, onboarding, or three-action flows.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="hero-actions-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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"},{"label":"Contact support","href":"#support","icon":"icon-[lucide--life-buoy]","variant":"ghost"}]' align="end" orientation="vertical" stackOnMobile="true" fullWidthMobile="true" size="lg" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Vertical mobile-first actions usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;HeroActions
actions='[
<span>&#123;</span>
"label": "Browse components",
"href": "#components",
"icon": "icon-[lucide--blocks]",
"variant": "primary"
<span>&#125;</span>,
<span>&#123;</span>
"label": "View metrics",
"href": "#metrics",
"icon": "icon-[lucide--chart-no-axes-column-increasing]",
"variant": "outline"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Contact support",
"href": "#support",
"icon": "icon-[lucide--life-buoy]",
"variant": "ghost"
<span>&#125;</span>
]'
align="end"
orientation="vertical"
size="lg"
/&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>stackOnMobile</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fullWidthMobile</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#hero-actions-demo-1">Primary and secondary actions</a><a href="#hero-actions-demo-2">Centered campaign actions</a><a href="#hero-actions-demo-3">Vertical mobile-first actions</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/hero"><small>Previous</small><strong>← Hero</strong></a>
<a href="/components/marketing-section-header"><small>Next</small><strong>Marketing Section Header →</strong></a>
</nav>
}
}
app/pages/components/hero.wrn
-1705
View File
File diff suppressed because it is too large. Load diff
app/pages/components/image.wrn
+5 -5
View File
@@ -39,7 +39,7 @@ page ImageDetail {
<pre><code data-playground-code>&lt;Image /&gt;</code></pre> <pre><code data-playground-code>&lt;Image /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -58,7 +58,7 @@ page ImageDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="image-demo-1" class="demo-canvas demo-canvas--1"> <div id="image-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Responsive content image usage"> <section class="demo-code" aria-label="Responsive content image usage">
@@ -80,7 +80,7 @@ page ImageDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="image-demo-2" class="demo-canvas demo-canvas--2"> <div id="image-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Image size="sm" src="/showcase-images/blue-mountain.svg" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Image size="sm" src="/showcase-images/blue-mountain.svg" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Rounded thumbnail usage"> <section class="demo-code" aria-label="Rounded thumbnail usage">
@@ -104,7 +104,7 @@ page ImageDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="image-demo-3" class="demo-canvas demo-canvas--3"> <div id="image-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Image size="lg" src="/showcase-images/green-hero.svg" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Image size="lg" src="/showcase-images/green-hero.svg" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Eager hero image usage"> <section class="demo-code" aria-label="Eager hero image usage">
@@ -121,7 +121,7 @@ page ImageDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>fit</code></td><td>string</td><td><code>"cover"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>fit</code></td><td>string</td><td><code>"cover"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
app/pages/components/input-group.wrn
+33 -37
View File
@@ -4,17 +4,17 @@ page InputGroupDetail {
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_id = ctx.url.searchParams.get("pg_id") ?? "" state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
state playground_name = ctx.url.searchParams.get("pg_name") ?? "" state playground_name = ctx.url.searchParams.get("pg_name") ?? "workspace-url"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Group" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Workspace address"
state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true" state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "your-team"
state playground_type = ctx.url.searchParams.get("pg_type") ?? "text" state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
state playground_startText = ctx.url.searchParams.get("pg_startText") ?? "" state playground_startText = ctx.url.searchParams.get("pg_startText") ?? "https://"
state playground_endText = ctx.url.searchParams.get("pg_endText") ?? "" state playground_endText = ctx.url.searchParams.get("pg_endText") ?? ".example.com"
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Input Group" state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? ""
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
@@ -23,7 +23,7 @@ page InputGroupDetail {
state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true" state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true" state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Input Group" title = "Input Group"
description = "Theme-aware, responsive input group component." description = "Theme-aware, responsive input group component."
@@ -50,10 +50,11 @@ page InputGroupDetail {
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;InputGroup <pre><code data-playground-code>&lt;InputGroup
label="Input Group" name="workspace-url"
value="sample-1" label="Workspace address"
placeholder="Enter a sample value" placeholder="your-team"
actionLabel="Input Group" startText="https://"
endText=".example.com"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
@@ -61,7 +62,7 @@ page InputGroupDetail {
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-input-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-group-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-group-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-group-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-group-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-group-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-group-label" name="pg_label" type="text" value="Input Group" /></label><label class="playground-toggle" for="playground-input-group-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-group-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-group-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-group-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-group-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-group-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-group-startText"><span><strong>start Text</strong><small>string</small></span><input id="playground-input-group-startText" name="pg_startText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-endText"><span><strong>end Text</strong><small>string</small></span><input id="playground-input-group-endText" name="pg_endText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-group-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-group-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-group-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-group-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-input-group-actionLabel" name="pg_actionLabel" type="text" value="Input Group" /></label><label class="playground-field" for="playground-input-group-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-group-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-group-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-group-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-group-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-group-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-group-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-variant"><span><strong>variant</strong><small>string</small></span><inputLine truncated <div class="playground-fields"><label class="playground-field" for="playground-input-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-group-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-group-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-group-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-group-name" name="pg_name" type="text" value="workspace-url" /></label><label class="playground-field" for="playground-input-group-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-group-label" name="pg_label" type="text" value="Workspace address" /></label><label class="playground-toggle" for="playground-input-group-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-group-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-group-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-input-group-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-group-placeholder" name="pg_placeholder" type="text" value="your-team" /></label><label class="playground-field" for="playground-input-group-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-group-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-group-startText"><span><strong>start Text</strong><small>string</small></span><input id="playground-input-group-startText" name="pg_startText" type="text" value="https://" /></label><label class="playground-field" for="playground-input-group-endText"><span><strong>end Text</strong><small>string</small></span><input id="playground-input-group-endText" name="pg_endText" type="text" value=".example.com" /></label><label class="playground-field" for="playground-input-group-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-group-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-group-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-group-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-group-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-input-group-actionLabel" name="pg_actionLabel" type="text" value="" /></label><label class="playground-field" for="playground-input-group-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-group-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-group-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-group-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-group-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-group-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-group-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-group-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-variant"><span><strong>variant</strong><small>string</small></spLine truncated
</form> </form>
</div> </div>
</section> </section>
@@ -76,16 +77,17 @@ page InputGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-group-demo-1" class="demo-canvas demo-canvas--1"> <div id="input-group-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputGroup size="default" label="Input Group" hiddenLabel="false" value="sample-1" placeholder="Enter a sample value" icon="" actionLabel="Input Group" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="https://" endText=".example.com" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;InputGroup <pre><code>&lt;InputGroup
label="Input Group" name="workspace-url"
value="sample-1" label="Workspace address"
placeholder="Enter a sample value" placeholder="your-team"
actionLabel="Input Group" startText="https://"
endText=".example.com"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -98,19 +100,17 @@ page InputGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-group-demo-2" class="demo-canvas demo-canvas--2"> <div id="input-group-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputGroup size="sm" label="Compact example" hiddenLabel="false" value="sample-2" placeholder="Enter a sample value" icon="icon-[lucide--arrow-right]" actionLabel="Compact example" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="icon-[lucide--search]" iconPosition="start" actionLabel="Search" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;InputGroup <pre><code>&lt;InputGroup
size="sm" name="workspace-url"
label="Compact example" label="Workspace address"
value="sample-2" placeholder="your-team"
placeholder="Enter a sample value" icon="icon-[lucide--search]"
icon="icon-[lucide--arrow-right]" actionLabel="Search"
actionLabel="Compact example"
variant="secondary"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -123,19 +123,15 @@ page InputGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-group-demo-3" class="demo-canvas demo-canvas--3"> <div id="input-group-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputGroup size="lg" label="Advanced example" hiddenLabel="false" value="sample-3" placeholder="Search by name, email, or identifier" icon="icon-[lucide--trash-2]" actionLabel="Advanced example" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;InputGroup <pre><code>&lt;InputGroup
size="lg" name="workspace-url"
label="Advanced example" label="Workspace address"
value="sample-3" placeholder="your-team"
placeholder="Search by name, email, or identifier"
icon="icon-[lucide--trash-2]"
actionLabel="Advanced example"
variant="success"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
app/pages/components/input-number.wrn
+12 -12
View File
@@ -94,7 +94,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-1" class="demo-canvas demo-canvas--1"> <div id="input-number-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div> <div class="demo-render"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
</div> </div>
<section class="demo-code" aria-label="Default controls usage"> <section class="demo-code" aria-label="Default controls usage">
@@ -117,7 +117,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-2" class="demo-canvas demo-canvas--2"> <div id="input-number-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity" /></div> <div class="demo-render"><InputNumber size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity" /></div>
</div> </div>
<section class="demo-code" aria-label="Labeled input style usage"> <section class="demo-code" aria-label="Labeled input style usage">
@@ -142,7 +142,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-3" class="demo-canvas demo-canvas--3"> <div id="input-number-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity" /></div> <div class="demo-render"><InputNumber size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity" /></div>
</div> </div>
<section class="demo-code" aria-label="Vertical buttons usage"> <section class="demo-code" aria-label="Vertical buttons usage">
@@ -167,7 +167,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-4" class="demo-canvas demo-canvas--4"> <div id="input-number-demo-4" class="demo-canvas demo-canvas--4">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20" /></div> <div class="demo-render"><InputNumber size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20" /></div>
</div> </div>
<section class="demo-code" aria-label="Horizontal buttons usage"> <section class="demo-code" aria-label="Horizontal buttons usage">
@@ -191,7 +191,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-5" class="demo-canvas demo-canvas--5"> <div id="input-number-demo-5" class="demo-canvas demo-canvas--5">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10" /></div> <div class="demo-render"><InputNumber size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact size usage"> <section class="demo-code" aria-label="Compact size usage">
@@ -214,7 +214,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-6" class="demo-canvas demo-canvas--6"> <div id="input-number-demo-6" class="demo-canvas demo-canvas--6">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly" /></div> <div class="demo-render"><InputNumber size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly" /></div>
</div> </div>
<section class="demo-code" aria-label="Seat quantity selector usage"> <section class="demo-code" aria-label="Seat quantity selector usage">
@@ -239,7 +239,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-7" class="demo-canvas demo-canvas--7"> <div id="input-number-demo-7" class="demo-canvas demo-canvas--7">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" name="disabled-input" value="10" inputDisabled="true" /></div> <div class="demo-render"><InputNumber size="md" color="primary" name="disabled-input" value="10" inputDisabled="true" /></div>
</div> </div>
<section class="demo-code" aria-label="Disabled input usage"> <section class="demo-code" aria-label="Disabled input usage">
@@ -261,7 +261,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-8" class="demo-canvas demo-canvas--8"> <div id="input-number-demo-8" class="demo-canvas demo-canvas--8">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true" /></div> <div class="demo-render"><InputNumber size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true" /></div>
</div> </div>
<section class="demo-code" aria-label="Disabled buttons usage"> <section class="demo-code" aria-label="Disabled buttons usage">
@@ -283,7 +283,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-9" class="demo-canvas demo-canvas--9"> <div id="input-number-demo-9" class="demo-canvas demo-canvas--9">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2" /></div> <div class="demo-render"><InputNumber size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2" /></div>
</div> </div>
<section class="demo-code" aria-label="Custom step size usage"> <section class="demo-code" aria-label="Custom step size usage">
@@ -306,7 +306,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-10" class="demo-canvas demo-canvas--10"> <div id="input-number-demo-10" class="demo-canvas demo-canvas--10">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" name="negative-values" value="-10" min="-100" max="100" /></div> <div class="demo-render"><InputNumber size="md" color="primary" name="negative-values" value="-10" min="-100" max="100" /></div>
</div> </div>
<section class="demo-code" aria-label="Negative values usage"> <section class="demo-code" aria-label="Negative values usage">
@@ -329,7 +329,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-11" class="demo-canvas demo-canvas--11"> <div id="input-number-demo-11" class="demo-canvas demo-canvas--11">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" name="maximum-limit" value="10" min="0" max="10" /></div> <div class="demo-render"><InputNumber size="md" color="primary" name="maximum-limit" value="10" min="0" max="10" /></div>
</div> </div>
<section class="demo-code" aria-label="Maximum limit usage"> <section class="demo-code" aria-label="Maximum limit usage">
@@ -352,7 +352,7 @@ page InputNumberDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-number-demo-12" class="demo-canvas demo-canvas--12"> <div id="input-number-demo-12" class="demo-canvas demo-canvas--12">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><InputNumber size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit" /></div> <div class="demo-render"><InputNumber size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit" /></div>
</div> </div>
<section class="demo-code" aria-label="Validation states usage"> <section class="demo-code" aria-label="Validation states usage">
app/pages/components/input.wrn
+9 -8
View File
@@ -16,6 +16,7 @@ page InputDetail {
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
state playground_invalidMessage = ctx.url.searchParams.get("pg_invalidMessage") ?? ""
state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true" state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true" state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
@@ -42,7 +43,7 @@ page InputDetail {
<span class="showcase-eyebrow">Forms component</span> <span class="showcase-eyebrow">Forms component</span>
<h1>Input</h1> <h1>Input</h1>
<p>Theme-aware, responsive input component.</p> <p>Theme-aware, responsive input component.</p>
<div class="detail-badges"><span>28 props</span><span>0 slots</span><span>7 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>29 props</span><span>0 slots</span><span>7 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -51,7 +52,7 @@ page InputDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Input size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' value='{playground_value}' type='{playground_type}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' autocomplete='{playground_autocomplete}' inputmode='{playground_inputmode}' minlength='{playground_minlength}' maxlength='{playground_maxlength}' pattern='{playground_pattern}' min='{playground_min}' max='{playground_max}' step='{playground_step}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Input size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' value='{playground_value}' type='{playground_type}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' invalidMessage='{playground_invalidMessage}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' autocomplete='{playground_autocomplete}' inputmode='{playground_inputmode}' minlength='{playground_minlength}' maxlength='{playground_maxlength}' pattern='{playground_pattern}' min='{playground_min}' max='{playground_max}' step='{playground_step}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Input <pre><code data-playground-code>&lt;Input
@@ -63,8 +64,8 @@ page InputDetail {
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>29 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-label" name="pg_label" type="text" value="Input" /></label><label class="playground-toggle" for="playground-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-input-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true">Line truncated <div class="playground-fields"><label class="playground-field" for="playground-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-label" name="pg_label" type="text" value="Input" /></label><label class="playground-toggle" for="playground-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-input-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-input-invalidMessage"><span><strong>invalid Message</strong><small>string</small></span><input id="playground-input-invalidMessage" name="pg_invalidMessage" type="text" value="" /></label><label class="playground-toggle" for="playground-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playgrounLine truncated
</form> </form>
</div> </div>
</section> </section>
@@ -79,7 +80,7 @@ page InputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-demo-1" class="demo-canvas demo-canvas--1"> <div id="input-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Input size="default" label="Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Input size="default" label="Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
@@ -99,7 +100,7 @@ page InputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-demo-2" class="demo-canvas demo-canvas--2"> <div id="input-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Input size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Input size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
@@ -123,7 +124,7 @@ page InputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="input-demo-3" class="demo-canvas demo-canvas--3"> <div id="input-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Input size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Input size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
@@ -178,7 +179,7 @@ if (component) registerOutputHandler(component, "keydown", (payload) =&gt; <span
if (component) registerOutputHandler(component, "keyup", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "keyup", (payload) =&gt; <span>&#123;</span>
console.log("keyup", payload) console.log("keyup", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inputmode</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>invalidMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inputmode</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-demo-1">Production default</a><a href="#input-demo-2">Compact application</a><a href="#input-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-demo-1">Production default</a><a href="#input-demo-2">Compact application</a><a href="#input-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/kbd.wrn
+15 -17
View File
@@ -3,8 +3,8 @@ page KbdDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Kbd" state playground_label = ctx.url.searchParams.get("pg_label") ?? "⌘ K"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Kbd" title = "Kbd"
description = "Theme-aware, responsive kbd component." description = "Theme-aware, responsive kbd component."
@@ -31,15 +31,15 @@ page KbdDetail {
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Kbd <pre><code data-playground-code>&lt;Kbd
label="Kbd" label="⌘ K"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-kbd-size"><span><strong>size</strong><small>string</small></span><select id="playground-kbd-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-kbd-color"><span><strong>color</strong><small>string</small></span><select id="playground-kbd-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-kbd-label"><span><strong>label</strong><small>string</small></span><input id="playground-kbd-label" name="pg_label" type="text" value="Kbd" /></label><label class="playground-field" for="playground-kbd-class"><span><strong>class</strong><small>string</small></span><input id="playground-kbd-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-kbd-size"><span><strong>size</strong><small>string</small></span><select id="playground-kbd-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-kbd-color"><span><strong>color</strong><small>string</small></span><select id="playground-kbd-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-kbd-label"><span><strong>label</strong><small>string</small></span><input id="playground-kbd-label" name="pg_label" type="text" value="⌘ K" /></label><label class="playground-field" for="playground-kbd-class"><span><strong>class</strong><small>string</small></span><input id="playground-kbd-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -54,13 +54,13 @@ page KbdDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="kbd-demo-1" class="demo-canvas demo-canvas--1"> <div id="kbd-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Kbd size="default" label="Kbd" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Kbd size="default" color="primary" label="⌘ K" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Kbd <pre><code>&lt;Kbd
label="Kbd" label="⌘ K"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -73,14 +73,13 @@ page KbdDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="kbd-demo-2" class="demo-canvas demo-canvas--2"> <div id="kbd-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Kbd size="sm" label="Compact example" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Kbd size="default" color="primary" label="Esc" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Kbd <pre><code>&lt;Kbd
size="sm" label="Esc"
label="Compact example"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -93,19 +92,18 @@ page KbdDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="kbd-demo-3" class="demo-canvas demo-canvas--3"> <div id="kbd-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Kbd size="lg" label="Advanced example" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Kbd size="default" color="primary" label="Ctrl + Enter" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Kbd <pre><code>&lt;Kbd
size="lg" label="Ctrl + Enter"
label="Advanced example"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
app/pages/components/layout-splitter.wrn
+5 -5
View File
@@ -30,7 +30,7 @@ page LayoutSplitterDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><LayoutSplitter color='{playground_color}' size='{playground_size}' orientation='{playground_orientation}' minSize='{playground_minSize}' step='{playground_step}' label='{playground_label}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><LayoutSplitter color='{playground_color}' size='{playground_size}' orientation='{playground_orientation}' minSize='{playground_minSize}' step='{playground_step}' label='{playground_label}' class='{playground_class}'><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;LayoutSplitter <pre><code data-playground-code>&lt;LayoutSplitter
@@ -63,8 +63,8 @@ page LayoutSplitterDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="layout-splitter-demo-1" class="demo-canvas demo-canvas--1"> <div id="layout-splitter-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
</div> </div>
<section class="demo-code" aria-label="Drag or arrow the divider usage"> <section class="demo-code" aria-label="Drag or arrow the divider usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -89,8 +89,8 @@ page LayoutSplitterDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="layout-splitter-demo-2" class="demo-canvas demo-canvas--2"> <div id="layout-splitter-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><LayoutSplitter size="60" orientation="vertical" minSize="25" step="10" label="Resize rows" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><LayoutSplitter size="60" orientation="vertical" minSize="25" step="10" label="Resize rows" class="showcase-instance showcase-instance--2"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
</div> </div>
<section class="demo-code" aria-label="Stacked panes usage"> <section class="demo-code" aria-label="Stacked panes usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
app/pages/components/legend-indicator.wrn
+148 -489
View File
@@ -33,118 +33,123 @@ page LegendIndicatorDetail {
<div class="playground-preview-source" data-playground-preview><LegendIndicator size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><LegendIndicator size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;LegendIndicator <pre><code data-playground-code>page LegendIndicatorExample <span>&#123;</span>
title="Legend Indicator example" state items = [
description="A polished default legend indicator for a modern application." <span>&#123;</span>
items='[ "id": "legend-indicator-0-1",
<span>&#123;</span> "key": "legend-indicator-0-1",
"id": "legend-indicator-0-1", "value": "primary",
"key": "legend-indicator-0-1", "label": "Primary workflow",
"value": "primary", "title": "Primary workflow",
"label": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"title": "Primary workflow", "text": "A configurable sample message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#legend-indicator-demo",
"text": "A configurable sample message.", "actionHref": "#legend-indicator-demo",
"href": "#legend-indicator-demo", "actionLabel": "View details",
"actionHref": "#legend-indicator-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": true,
"time": "09:30", "selected": true,
"current": true, "checked": true,
"selected": true, "disabled": false,
"checked": true, "outgoing": false,
"disabled": false, "open": true,
"outgoing": false, "number": 1,
"open": true, "count": 16,
"number": 1, "percentage": 72,
"count": 16, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 1",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>,
] <span>&#123;</span>
<span>&#125;</span>, "id": "legend-indicator-0-2",
<span>&#123;</span> "key": "legend-indicator-0-2",
"id": "legend-indicator-0-2", "value": "secondary",
"key": "legend-indicator-0-2", "label": "Additional option",
"value": "secondary", "title": "Supporting example",
"label": "Additional option", "description": "A clean default configuration for everyday product interfaces.",
"title": "Supporting example", "text": "Another configurable message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#legend-indicator-demo",
"text": "Another configurable message.", "actionHref": "#legend-indicator-demo",
"href": "#legend-indicator-demo", "actionLabel": "View details",
"actionHref": "#legend-indicator-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": false,
"time": "09:30", "selected": false,
"current": false, "checked": false,
"selected": false, "disabled": false,
"checked": false, "outgoing": true,
"disabled": false, "open": true,
"outgoing": true, "number": 2,
"open": true, "count": 32,
"number": 2, "percentage": 72,
"count": 32, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 2",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>
] ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;LegendIndicator
/&gt;</code></pre> title="Legend Indicator example"
description="A polished default legend indicator for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -267,389 +272,43 @@ page LegendIndicatorDetail {
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list"> <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div> <div><span class="demo-case-eyebrow">Recommended</span><h2>Chart legend</h2><p>Toggle a series and handle @toggle to update your chart.</p></div>
<span class="demo-case-number">01</span> <span class="demo-case-number">01</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="legend-indicator-demo-1" class="demo-canvas demo-canvas--1"> <div id="legend-indicator-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><LegendIndicator size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items='[{"id":"legend-indicator-0-1","key":"legend-indicator-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":"#legend-indicator-demo","actionHref":"#legend-indicator-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":"legend-indicator-0-2","key":"legend-indicator-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><LegendIndicator size="default" title="Traffic sources" description="Select a source to toggle its visibility." items='[{"label":"Direct","color":"#8b5cf6","value":"42%"},{"label":"Search","color":"#14b8a6","value":"35%"},{"label":"Referral","color":"#f59e0b","value":"23%"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Chart legend usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;LegendIndicator <pre><code>page LegendIndicatorExample <span>&#123;</span>
title="Legend Indicator example" state items = [
description="A polished default legend indicator for a modern application." <span>&#123;</span>
items='[ "label": "Direct",
<span>&#123;</span> "color": "#8b5cf6",
"id": "legend-indicator-0-1", "value": "42%"
"key": "legend-indicator-0-1", <span>&#125;</span>,
"value": "primary", <span>&#123;</span>
"label": "Primary workflow", "label": "Search",
"title": "Primary workflow", "color": "#14b8a6",
"description": "A clean default configuration for everyday product interfaces.", "value": "35%"
"text": "A configurable sample message.", <span>&#125;</span>,
"href": "#legend-indicator-demo", <span>&#123;</span>
"actionHref": "#legend-indicator-demo", "label": "Referral",
"actionLabel": "View details", "color": "#f59e0b",
"icon": "icon-[lucide--sparkles]", "value": "23%"
"iconClass": "icon-[lucide--sparkles]", <span>&#125;</span>
"variant": "primary", ]
"status": "Active", view <span>&#123;</span>
"time": "09:30", &lt;LegendIndicator
"current": true, title="Traffic sources"
"selected": true, description="Select a source to toggle its visibility."
"checked": true, items="<span>&#123;</span>items<span>&#125;</span>"
"disabled": false, /&gt;
"outgoing": false, <span>&#125;</span>
"open": true, <span>&#125;</span></code></pre>
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "legend-indicator-0-2",
"key": "legend-indicator-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#legend-indicator-demo",
"actionHref": "#legend-indicator-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="legend-indicator-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><LegendIndicator size="sm" title="Compact Legend Indicator" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"legend-indicator-1-1","key":"legend-indicator-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":"#legend-indicator-demo","actionHref":"#legend-indicator-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":"legend-indicator-1-2","key":"legend-indicator-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;LegendIndicator
size="sm"
title="Compact Legend Indicator"
description="A compact configuration for dashboards and dense product surfaces."
items='[
<span>&#123;</span>
"id": "legend-indicator-1-1",
"key": "legend-indicator-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": "#legend-indicator-demo",
"actionHref": "#legend-indicator-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "legend-indicator-1-2",
"key": "legend-indicator-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#legend-indicator-demo",
"actionHref": "#legend-indicator-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
variant="secondary"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="legend-indicator-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><LegendIndicator size="lg" title="Advanced Legend Indicator" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"legend-indicator-2-1","key":"legend-indicator-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":"#legend-indicator-demo","actionHref":"#legend-indicator-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":"legend-indicator-2-2","key":"legend-indicator-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":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;LegendIndicator
size="lg"
title="Advanced Legend Indicator"
description="A richer configuration demonstrating additional content and hierarchy."
items='[
<span>&#123;</span>
"id": "legend-indicator-2-1",
"key": "legend-indicator-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": "#legend-indicator-demo",
"actionHref": "#legend-indicator-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "legend-indicator-2-2",
"key": "legend-indicator-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": "#legend-indicator-demo",
"actionHref": "#legend-indicator-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
variant="success"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -670,7 +329,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Legend Indicator"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Legend Indicator"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#legend-indicator-demo-1">Production default</a><a href="#legend-indicator-demo-2">Compact application</a><a href="#legend-indicator-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#legend-indicator-demo-1">Chart legend</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/link.wrn
+6 -6
View File
@@ -40,7 +40,7 @@ page LinkDetail {
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -59,7 +59,7 @@ page LinkDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="link-demo-1" class="demo-canvas demo-canvas--1"> <div id="link-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Standard navigation link usage"> <section class="demo-code" aria-label="Standard navigation link usage">
@@ -79,7 +79,7 @@ page LinkDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="link-demo-2" class="demo-canvas demo-canvas--2"> <div id="link-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Link size="sm" label="WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Link size="sm" label="WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="External resource link usage"> <section class="demo-code" aria-label="External resource link usage">
@@ -102,7 +102,7 @@ page LinkDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="link-demo-3" class="demo-canvas demo-canvas--3"> <div id="link-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Link size="lg" color="info" label="Explore framework guides" href="/framework-guides" external="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Link size="lg" color="info" label="Explore framework guides" href="/framework-guides" external="false" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Large emphasized link usage"> <section class="demo-code" aria-label="Large emphasized link usage">
@@ -116,7 +116,7 @@ page LinkDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>underline</code></td><td>string</td><td><code>"hover"</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>underline</code></td><td>string</td><td><code>"hover"</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
@@ -125,7 +125,7 @@ page LinkDetail {
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
<a href="/components/layout-splitter"><small>Previous</small><strong>← Layout Splitter</strong></a> <a href="/components/layout-splitter"><small>Previous</small><strong>← Layout Splitter</strong></a>
<a href="/components/public-page-shell"><small>Next</small><strong>Public Page Shell →</strong></a> <a href="/components/section"><small>Next</small><strong>Section →</strong></a>
</nav> </nav>
} }
} }
app/pages/components/list-group.wrn
+152 -570
View File
@@ -3,11 +3,12 @@ page ListGroupDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "List Group example" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Workspace"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list group for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"list-group-0-1\",\"key\":\"list-group-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\":\"#list-group-demo\",\"actionHref\":\"#list-group-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\":\"list-group-0-2\",\"key\":\"list-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#list-group-demo\",\"actionHref\":\"#list-group-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\":\"inbox\",\"label\":\"Inbox\",\"description\":\"Messages that need your attention\",\"icon\":\"icon-[lucide--inbox]\",\"badge\":\"8\"},{\"value\":\"projects\",\"label\":\"Projects\",\"description\":\"Your team's active work\",\"icon\":\"icon-[lucide--folder]\"},{\"value\":\"archive\",\"label\":\"Archive\",\"description\":\"Completed conversations\",\"icon\":\"icon-[lucide--archive]\"}]")
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" 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_value = ctx.url.searchParams.get("pg_value") ?? "inbox"
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "List Group" title = "List Group"
description = "Theme-aware, responsive list group component." description = "Theme-aware, responsive list group component."
@@ -21,7 +22,7 @@ page ListGroupDetail {
<span class="showcase-eyebrow">Base component</span> <span class="showcase-eyebrow">Base component</span>
<h1>List Group</h1> <h1>List Group</h1>
<p>Theme-aware, responsive list group component.</p> <p>Theme-aware, responsive list group component.</p>
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -30,235 +31,66 @@ page ListGroupDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><ListGroup size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><ListGroup size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' value='{playground_value}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;ListGroup <pre><code data-playground-code>page ListGroupExample <span>&#123;</span>
title="List Group example" state items = [
description="A polished default list group for a modern application." <span>&#123;</span>
items='[ "value": "inbox",
<span>&#123;</span> "label": "Inbox",
"id": "list-group-0-1", "description": "Messages that need your attention",
"key": "list-group-0-1", "icon": "icon-[lucide--inbox]",
"value": "primary", "badge": "8"
"label": "Primary workflow", <span>&#125;</span>,
"title": "Primary workflow", <span>&#123;</span>
"description": "A clean default configuration for everyday product interfaces.", "value": "projects",
"text": "A configurable sample message.", "label": "Projects",
"href": "#list-group-demo", "description": "Your team's active work",
"actionHref": "#list-group-demo", "icon": "icon-[lucide--folder]"
"actionLabel": "View details", <span>&#125;</span>,
"icon": "icon-[lucide--sparkles]", <span>&#123;</span>
"iconClass": "icon-[lucide--sparkles]", "value": "archive",
"variant": "primary", "label": "Archive",
"status": "Active", "description": "Completed conversations",
"time": "09:30", "icon": "icon-[lucide--archive]"
"current": true, <span>&#125;</span>
"selected": true, ]
"checked": true, view <span>&#123;</span>
"disabled": false, &lt;ListGroup
"outgoing": false, title="Workspace"
"open": true, items="<span>&#123;</span>items<span>&#125;</span>"
"number": 1, value="inbox"
"count": 16, /&gt;
"percentage": 72, <span>&#125;</span>
"color": "#7c3aed", <span>&#125;</span></code></pre>
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "list-group-0-2",
"key": "list-group-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#list-group-demo",
"actionHref": "#list-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-list-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-group-title" name="pg_title" type="text" value="List Group example" /></label><label class="playground-field" for="playground-list-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-group-description" name="pg_description" type="text" value="A polished default list group for a modern application." /></label><label class="playground-field" for="playground-list-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-list-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-list-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-group-title" name="pg_title" type="text" value="Workspace" /></label><label class="playground-field" for="playground-list-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-group-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-list-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-list-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "list-group-0-1", "value": "inbox",
"key": "list-group-0-1", "label": "Inbox",
"value": "primary", "description": "Messages that need your attention",
"label": "Primary workflow", "icon": "icon-[lucide--inbox]",
"title": "Primary workflow", "badge": "8"
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#list-group-demo",
"actionHref": "#list-group-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;, &#125;,
&#123; &#123;
"id": "list-group-0-2", "value": "projects",
"key": "list-group-0-2", "label": "Projects",
"value": "secondary", "description": "Your team's active work",
"label": "Additional option", "icon": "icon-[lucide--folder]"
"title": "Supporting example", &#125;,
"description": "A clean default configuration for everyday product interfaces.", &#123;
"text": "Another configurable message.", "value": "archive",
"href": "#list-group-demo", "label": "Archive",
"actionHref": "#list-group-demo", "description": "Completed conversations",
"actionLabel": "View details", "icon": "icon-[lucide--archive]"
"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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-list-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-list-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-list-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-list-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-list-group-value" name="pg_value" type="text" value="inbox" /></label><label class="playground-field" for="playground-list-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -273,123 +105,41 @@ page ListGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="list-group-demo-1" class="demo-canvas demo-canvas--1"> <div id="list-group-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ListGroup size="default" title="List Group example" description="A polished default list group for a modern application." items='[{"id":"list-group-0-1","key":"list-group-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":"#list-group-demo","actionHref":"#list-group-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":"list-group-0-2","key":"list-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ListGroup <pre><code>page ListGroupExample <span>&#123;</span>
title="List Group example" state items = [
description="A polished default list group for a modern application." <span>&#123;</span>
items='[ "value": "inbox",
<span>&#123;</span> "label": "Inbox",
"id": "list-group-0-1", "description": "Messages that need your attention",
"key": "list-group-0-1", "icon": "icon-[lucide--inbox]",
"value": "primary", "badge": "8"
"label": "Primary workflow", <span>&#125;</span>,
"title": "Primary workflow", <span>&#123;</span>
"description": "A clean default configuration for everyday product interfaces.", "value": "projects",
"text": "A configurable sample message.", "label": "Projects",
"href": "#list-group-demo", "description": "Your team's active work",
"actionHref": "#list-group-demo", "icon": "icon-[lucide--folder]"
"actionLabel": "View details", <span>&#125;</span>,
"icon": "icon-[lucide--sparkles]", <span>&#123;</span>
"iconClass": "icon-[lucide--sparkles]", "value": "archive",
"variant": "primary", "label": "Archive",
"status": "Active", "description": "Completed conversations",
"time": "09:30", "icon": "icon-[lucide--archive]"
"current": true, <span>&#125;</span>
"selected": true, ]
"checked": true, view <span>&#123;</span>
"disabled": false, &lt;ListGroup
"outgoing": false, title="Workspace"
"open": true, items="<span>&#123;</span>items<span>&#125;</span>"
"number": 1, value="inbox"
"count": 16, /&gt;
"percentage": 72, <span>&#125;</span>
"color": "#7c3aed", <span>&#125;</span></code></pre>
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "list-group-0-2",
"key": "list-group-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#list-group-demo",
"actionHref": "#list-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -401,125 +151,41 @@ page ListGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="list-group-demo-2" class="demo-canvas demo-canvas--2"> <div id="list-group-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ListGroup size="sm" title="Compact List Group" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"list-group-1-1","key":"list-group-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":"#list-group-demo","actionHref":"#list-group-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":"list-group-1-2","key":"list-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ListGroup <pre><code>page ListGroupExample <span>&#123;</span>
size="sm" state items = [
title="Compact List Group" <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." "value": "inbox",
items='[ "label": "Inbox",
<span>&#123;</span> "description": "Messages that need your attention",
"id": "list-group-1-1", "icon": "icon-[lucide--inbox]",
"key": "list-group-1-1", "badge": "8"
"value": "primary", <span>&#125;</span>,
"label": "Secondary workflow", <span>&#123;</span>
"title": "Secondary workflow", "value": "projects",
"description": "A compact configuration designed for dense application layouts.", "label": "Projects",
"text": "A configurable sample message.", "description": "Your team's active work",
"href": "#list-group-demo", "icon": "icon-[lucide--folder]"
"actionHref": "#list-group-demo", <span>&#125;</span>,
"actionLabel": "View details", <span>&#123;</span>
"icon": "icon-[lucide--zap]", "value": "archive",
"iconClass": "icon-[lucide--zap]", "label": "Archive",
"variant": "secondary", "description": "Completed conversations",
"status": "Active", "icon": "icon-[lucide--archive]"
"time": "10:15", <span>&#125;</span>
"current": true, ]
"selected": true, view <span>&#123;</span>
"checked": true, &lt;ListGroup
"disabled": false, title="Workspace"
"outgoing": false, items="<span>&#123;</span>items<span>&#125;</span>"
"open": true, value="inbox"
"number": 1, /&gt;
"count": 24, <span>&#125;</span>
"percentage": 48, <span>&#125;</span></code></pre>
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "list-group-1-2",
"key": "list-group-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#list-group-demo",
"actionHref": "#list-group-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
variant="secondary"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -531,125 +197,41 @@ page ListGroupDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="list-group-demo-3" class="demo-canvas demo-canvas--3"> <div id="list-group-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><ListGroup size="lg" title="Advanced List Group" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"list-group-2-1","key":"list-group-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":"#list-group-demo","actionHref":"#list-group-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":"list-group-2-2","key":"list-group-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":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;ListGroup <pre><code>page ListGroupExample <span>&#123;</span>
size="lg" state items = [
title="Advanced List Group" <span>&#123;</span>
description="A richer configuration demonstrating additional content and hierarchy." "value": "inbox",
items='[ "label": "Inbox",
<span>&#123;</span> "description": "Messages that need your attention",
"id": "list-group-2-1", "icon": "icon-[lucide--inbox]",
"key": "list-group-2-1", "badge": "8"
"value": "primary", <span>&#125;</span>,
"label": "Advanced workflow", <span>&#123;</span>
"title": "Advanced workflow", "value": "projects",
"description": "A richer configuration with more supporting information and actions.", "label": "Projects",
"text": "A configurable sample message.", "description": "Your team's active work",
"href": "#list-group-demo", "icon": "icon-[lucide--folder]"
"actionHref": "#list-group-demo", <span>&#125;</span>,
"actionLabel": "Explore workflow", <span>&#123;</span>
"icon": "icon-[lucide--circle-check]", "value": "archive",
"iconClass": "icon-[lucide--circle-check]", "label": "Archive",
"variant": "success", "description": "Completed conversations",
"status": "Complete", "icon": "icon-[lucide--archive]"
"time": "11:45", <span>&#125;</span>
"current": true, ]
"selected": true, view <span>&#123;</span>
"checked": true, &lt;ListGroup
"disabled": false, title="Workspace"
"outgoing": false, items="<span>&#123;</span>items<span>&#125;</span>"
"open": true, value="inbox"
"number": 1, /&gt;
"count": 32, <span>&#125;</span>
"percentage": 91, <span>&#125;</span></code></pre>
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "list-group-2-2",
"key": "list-group-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": "#list-group-demo",
"actionHref": "#list-group-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
variant="success"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -667,7 +249,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
console.log("change", payload) console.log("change", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-group-demo-1">Production default</a><a href="#list-group-demo-2">Compact application</a><a href="#list-group-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-group-demo-1">Production default</a><a href="#list-group-demo-2">Compact application</a><a href="#list-group-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/list.wrn
+196 -176
View File
@@ -33,118 +33,123 @@ page ListDetail {
<div class="playground-preview-source" data-playground-preview><List size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><List size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;List <pre><code data-playground-code>page ListExample <span>&#123;</span>
title="List example" state items = [
description="A polished default list for a modern application." <span>&#123;</span>
items='[ "id": "list-0-1",
<span>&#123;</span> "key": "list-0-1",
"id": "list-0-1", "value": "primary",
"key": "list-0-1", "label": "Primary workflow",
"value": "primary", "title": "Primary workflow",
"label": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"title": "Primary workflow", "text": "A configurable sample message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#list-demo",
"text": "A configurable sample message.", "actionHref": "#list-demo",
"href": "#list-demo", "actionLabel": "View details",
"actionHref": "#list-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": true,
"time": "09:30", "selected": true,
"current": true, "checked": true,
"selected": true, "disabled": false,
"checked": true, "outgoing": false,
"disabled": false, "open": true,
"outgoing": false, "number": 1,
"open": true, "count": 16,
"number": 1, "percentage": 72,
"count": 16, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 1",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>,
] <span>&#123;</span>
<span>&#125;</span>, "id": "list-0-2",
<span>&#123;</span> "key": "list-0-2",
"id": "list-0-2", "value": "secondary",
"key": "list-0-2", "label": "Additional option",
"value": "secondary", "title": "Supporting example",
"label": "Additional option", "description": "A clean default configuration for everyday product interfaces.",
"title": "Supporting example", "text": "Another configurable message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#list-demo",
"text": "Another configurable message.", "actionHref": "#list-demo",
"href": "#list-demo", "actionLabel": "View details",
"actionHref": "#list-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": false,
"time": "09:30", "selected": false,
"current": false, "checked": false,
"selected": false, "disabled": false,
"checked": false, "outgoing": true,
"disabled": false, "open": true,
"outgoing": true, "number": 2,
"open": true, "count": 32,
"number": 2, "percentage": 72,
"count": 32, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 2",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>
] ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;List
/&gt;</code></pre> title="List example"
description="A polished default list for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -273,32 +278,37 @@ page ListDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="list-demo-1" class="demo-canvas demo-canvas--1"> <div id="list-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><List size="default" title="Citizen resources" description="Commonly requested public information." items='[{"label":"Report crime","href":"#report","icon":"icon-[lucide--shield-alert]"},{"label":"Track complaint","href":"#track","icon":"icon-[lucide--scan-search]"},{"label":"Certificates","href":"#certificates","icon":"icon-[lucide--file-check-2]"}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><List size="default" title="Citizen resources" description="Commonly requested public information." items='[{"label":"Report crime","href":"#report","icon":"icon-[lucide--shield-alert]"},{"label":"Track complaint","href":"#track","icon":"icon-[lucide--scan-search]"},{"label":"Certificates","href":"#certificates","icon":"icon-[lucide--file-check-2]"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Linked resource list usage"> <section class="demo-code" aria-label="Linked resource list usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;List <pre><code>page ListExample <span>&#123;</span>
title="Citizen resources" state items = [
description="Commonly requested public information." <span>&#123;</span>
items='[ "label": "Report crime",
<span>&#123;</span> "href": "#report",
"label": "Report crime", "icon": "icon-[lucide--shield-alert]"
"href": "#report", <span>&#125;</span>,
"icon": "icon-[lucide--shield-alert]" <span>&#123;</span>
<span>&#125;</span>, "label": "Track complaint",
<span>&#123;</span> "href": "#track",
"label": "Track complaint", "icon": "icon-[lucide--scan-search]"
"href": "#track", <span>&#125;</span>,
"icon": "icon-[lucide--scan-search]" <span>&#123;</span>
<span>&#125;</span>, "label": "Certificates",
<span>&#123;</span> "href": "#certificates",
"label": "Certificates", "icon": "icon-[lucide--file-check-2]"
"href": "#certificates", <span>&#125;</span>
"icon": "icon-[lucide--file-check-2]" ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;List
/&gt;</code></pre> title="Citizen resources"
description="Commonly requested public information."
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -310,31 +320,36 @@ page ListDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="list-demo-2" class="demo-canvas demo-canvas--2"> <div id="list-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><List size="sm" title="Current status" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"Application received","status":"Complete"},{"label":"Verification","status":"In progress"},{"label":"Decision","status":"Pending"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><List size="sm" title="Current status" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"Application received","status":"Complete"},{"label":"Verification","status":"In progress"},{"label":"Decision","status":"Pending"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact status list usage"> <section class="demo-code" aria-label="Compact status list usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;List <pre><code>page ListExample <span>&#123;</span>
size="sm" state items = [
title="Current status" <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." "label": "Application received",
items='[ "status": "Complete"
<span>&#123;</span> <span>&#125;</span>,
"label": "Application received", <span>&#123;</span>
"status": "Complete" "label": "Verification",
<span>&#125;</span>, "status": "In progress"
<span>&#123;</span> <span>&#125;</span>,
"label": "Verification", <span>&#123;</span>
"status": "In progress" "label": "Decision",
<span>&#125;</span>, "status": "Pending"
<span>&#123;</span> <span>&#125;</span>
"label": "Decision", ]
"status": "Pending" view <span>&#123;</span>
<span>&#125;</span> &lt;List
]' size="sm"
variant="soft" title="Current status"
/&gt;</code></pre> description="A compact configuration for dashboards and dense product surfaces."
items="<span>&#123;</span>items<span>&#125;</span>"
variant="soft"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -346,31 +361,36 @@ page ListDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="list-demo-3" class="demo-canvas demo-canvas--3"> <div id="list-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><List size="lg" title="Service requests" description="Recent requests and their current status." items='[{"label":"Address verification","description":"Submitted yesterday","status":"Review","href":"#request-1"},{"label":"Character certificate","description":"Submitted 3 days ago","status":"Approved","href":"#request-2"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><List size="lg" title="Service requests" description="Recent requests and their current status." items='[{"label":"Address verification","description":"Submitted yesterday","status":"Review","href":"#request-1"},{"label":"Character certificate","description":"Submitted 3 days ago","status":"Approved","href":"#request-2"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich action list usage"> <section class="demo-code" aria-label="Rich action list usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;List <pre><code>page ListExample <span>&#123;</span>
size="lg" state items = [
title="Service requests" <span>&#123;</span>
description="Recent requests and their current status." "label": "Address verification",
items='[ "description": "Submitted yesterday",
<span>&#123;</span> "status": "Review",
"label": "Address verification", "href": "#request-1"
"description": "Submitted yesterday", <span>&#125;</span>,
"status": "Review", <span>&#123;</span>
"href": "#request-1" "label": "Character certificate",
<span>&#125;</span>, "description": "Submitted 3 days ago",
<span>&#123;</span> "status": "Approved",
"label": "Character certificate", "href": "#request-2"
"description": "Submitted 3 days ago", <span>&#125;</span>
"status": "Approved", ]
"href": "#request-2" view <span>&#123;</span>
<span>&#125;</span> &lt;List
]' size="lg"
variant="raised" title="Service requests"
/&gt;</code></pre> description="Recent requests and their current status."
items="<span>&#123;</span>items<span>&#125;</span>"
variant="raised"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/map.wrn
+86 -219
View File
@@ -3,10 +3,19 @@ page MapDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Map example" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Bengaluru"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default map for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? "Interactive geographic map"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"map-0-1\",\"key\":\"map-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\":\"#map-demo\",\"actionHref\":\"#map-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\":\"map-0-2\",\"key\":\"map-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#map-demo\",\"actionHref\":\"#map-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") ?? "[]")
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_provider = ctx.url.searchParams.get("pg_provider") ?? "openstreetmap"
state playground_apiKey = ctx.url.searchParams.get("pg_apiKey") ?? ""
state playground_query = ctx.url.searchParams.get("pg_query") ?? ""
state playground_latitude = Number(ctx.url.searchParams.get("pg_latitude") ?? "12.9716")
state playground_longitude = Number(ctx.url.searchParams.get("pg_longitude") ?? "77.5946")
state playground_zoomLevel = Number(ctx.url.searchParams.get("pg_zoomLevel") ?? "13")
state playground_mapType = ctx.url.searchParams.get("pg_mapType") ?? "roadmap"
state playground_imageSrc = ctx.url.searchParams.get("pg_imageSrc") ?? ""
state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? "Map background"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo { seo {
title = "Map" title = "Map"
@@ -21,7 +30,7 @@ page MapDetail {
<span class="showcase-eyebrow">Integrations component</span> <span class="showcase-eyebrow">Integrations component</span>
<h1>Map</h1> <h1>Map</h1>
<p>Present responsive location information and markers with map-ready metadata and movement or marker events.</p> <p>Present responsive location information and markers with map-ready metadata and movement or marker events.</p>
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>16 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -30,129 +39,12 @@ page MapDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Map size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Map size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' provider='{playground_provider}' apiKey='{playground_apiKey}' query='{playground_query}' latitude='{playground_latitude}' longitude='{playground_longitude}' zoomLevel='{playground_zoomLevel}' mapType='{playground_mapType}' imageSrc='{playground_imageSrc}' imageAlt='{playground_imageAlt}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Map <pre><code data-playground-code>page MapExample <span>&#123;</span>
title="Map example" state items = [
description="A polished default map for a modern application." <span>&#123;</span>
items='[
<span>&#123;</span>
"id": "map-0-1",
"key": "map-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": "#map-demo",
"actionHref": "#map-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "map-0-2",
"key": "map-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#map-demo",
"actionHref": "#map-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Map example" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="A polished default map for a modern application." /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123;
"id": "map-0-1", "id": "map-0-1",
"key": "map-0-1", "key": "map-0-1",
"value": "primary", "value": "primary",
@@ -181,31 +73,31 @@ page MapDetail {
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 1", "ariaLabel": "Open primary workflow 1",
"items": [ "items": [
&#123; <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
&#125;, <span>&#125;</span>,
&#123; <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
&#125; <span>&#125;</span>
], ],
"links": [ "links": [
&#123; <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
&#125;, <span>&#125;</span>,
&#123; <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
&#125; <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
&#125;, <span>&#125;</span>,
&#123; <span>&#123;</span>
"id": "map-0-2", "id": "map-0-2",
"key": "map-0-2", "key": "map-0-2",
"value": "secondary", "value": "secondary",
@@ -234,31 +126,46 @@ page MapDetail {
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 2", "ariaLabel": "Open primary workflow 2",
"items": [ "items": [
&#123; <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
&#125;, <span>&#125;</span>,
&#123; <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
&#125; <span>&#125;</span>
], ],
"links": [ "links": [
&#123; <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
&#125;, <span>&#125;</span>,
&#123; <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
&#125; <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
&#125; <span>&#125;</span>
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]
view <span>&#123;</span>
&lt;Map
title="Map example"
description="A polished default map for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>16 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Bengaluru" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="Interactive geographic map" /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-map-provider"><span><strong>provider</strong><small>string</small></span><select id="playground-map-provider" name="pg_provider"><option value="openstreetmap" selected>openstreetmap</option><option value="google">google</option></select></label><label class="playground-field" for="playground-map-apiKey"><span><strong>api Key</strong><small>string</small></span><input id="playground-map-apiKey" name="pg_apiKey" type="text" value="" /></label><label class="playground-field" for="playground-map-query"><span><strong>query</strong><small>string</small></span><input id="playground-map-query" name="pg_query" type="text" value="" /></label><label class="playground-field" for="playground-map-latitude"><span><strong>latitude</strong><small>number</small></span><input id="playground-map-latitude" name="pg_latitude" type="number" value="12.9716" /></label><label class="playground-field" for="playground-map-longitude"><span><strong>longitude</strong><small>number</small></span><input id="playground-map-longitude" name="pg_longitude" type="number" value="77.5946" /></label><label class="playground-field" for="playground-map-zoomLevel"><span><strong>zoom Level</strong><small>number</small></span><input id="playground-map-zoomLevel" name="pg_zoomLevel" type="number" value="13" /></label><label class="playground-field" for="playground-map-mapType"><span><strong>map Type</strong><small>string</small></span><input id="playground-map-mapType" name="pg_mapType" type="text" value="roadmap" /></label><label class="playground-field" for="playground-map-imageSrc"><span><strong>image Src</strong><small>string</small></span><input id="playground-map-imageSrc" name="pg_imageSrc" type="text" value="" /></label><label class="playground-field" for="playground-map-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-map-imageAlt" name="pg_imageAlt" type="text" value="Map background" /></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -267,97 +174,57 @@ page MapDetail {
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list"> <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Station directory map</h2><p>Present locations with supporting names, addresses, and actions.</p></div> <div><span class="demo-case-eyebrow">Recommended</span><h2>OpenStreetMap</h2><p>A real interactive geographic map. Set latitude, longitude and zoomLevel; no API key is needed.</p></div>
<span class="demo-case-number">01</span> <span class="demo-case-number">01</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="map-demo-1" class="demo-canvas demo-canvas--1"> <div id="map-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Map size="default" title="Nearby police stations" description="Select a station to view contact details and jurisdiction information." items='[{"title":"Central station","description":"Main Road","latitude":18.5204,"longitude":73.8567},{"title":"North station","description":"University Road","latitude":18.559,"longitude":73.807}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Map size="default" title="Bengaluru" description="Pan and zoom to explore the city" items='[]' variant="default" provider="openstreetmap" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Station directory map usage"> <section class="demo-code" aria-label="OpenStreetMap usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Map <pre><code>page MapExample <span>&#123;</span>
title="Nearby police stations" state items = []
description="Select a station to view contact details and jurisdiction information." view <span>&#123;</span>
items='[ &lt;Map
<span>&#123;</span> title="Bengaluru"
"title": "Central station", description="Pan and zoom to explore the city"
"description": "Main Road", items="<span>&#123;</span>items<span>&#125;</span>"
"latitude": 18.5204, /&gt;
"longitude": 73.8567 <span>&#125;</span>
<span>&#125;</span>, <span>&#125;</span></code></pre>
<span>&#123;</span>
"title": "North station",
"description": "University Road",
"latitude": 18.559,
"longitude": 73.807
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Compact location preview</h2><p>Use a smaller map preview inside cards, drawers, and record details.</p></div> <div><span class="demo-case-eyebrow">Compact</span><h2>Google Maps</h2><p>Pass your restricted Maps Embed API key and a place query to show Google Maps.</p></div>
<span class="demo-case-number">02</span> <span class="demo-case-number">02</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="map-demo-2" class="demo-canvas demo-canvas--2"> <div id="map-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Map size="sm" title="Service location" description="Public service office" items='[{"title":"Public office","description":"City centre"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Map size="sm" title="Google Maps" description="A compact configuration for dashboards and dense product surfaces." items='[]' variant="secondary" provider="google" apiKey="" query="Bengaluru" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact location preview usage"> <section class="demo-code" aria-label="Google Maps usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Map <pre><code>page MapExample <span>&#123;</span>
size="sm" state items = []
title="Service location" view <span>&#123;</span>
description="Public service office" &lt;Map
items='[ size="sm"
<span>&#123;</span> title="Google Maps"
"title": "Public office", description="A compact configuration for dashboards and dense product surfaces."
"description": "City centre" items="<span>&#123;</span>items<span>&#125;</span>"
<span>&#125;</span> variant="secondary"
]' provider="google"
variant="soft" query="Bengaluru"
/&gt;</code></pre> /&gt;
</section> <span>&#125;</span>
</div> <span>&#125;</span></code></pre>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Operations map</h2><p>Use a larger map surface for multiple markers and operational context.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="map-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Map size="lg" color="info" title="Jurisdiction overview" description="Stations, service areas, and public facilities." items='[{"title":"Station A"},{"title":"Station B"},{"title":"Control room"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Operations map usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Map
size="lg"
color="info"
title="Jurisdiction overview"
description="Stations, service areas, and public facilities."
items='[
<span>&#123;</span>
"title": "Station A"
<span>&#125;</span>,
<span>&#123;</span>
"title": "Station B"
<span>&#125;</span>,
<span>&#123;</span>
"title": "Control room"
<span>&#125;</span>
]'
variant="raised"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -380,10 +247,10 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
if (component) registerOutputHandler(component, "zoom", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "zoom", (payload) =&gt; <span>&#123;</span>
console.log("zoom", payload) console.log("zoom", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>provider</code></td><td>string</td><td><code>"openstreetmap"</code></td><td>No</td></tr><tr><td><code>apiKey</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>query</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>latitude</code></td><td>number</td><td><code>12.9716</code></td><td>No</td></tr><tr><td><code>longitude</code></td><td>number</td><td><code>77.5946</code></td><td>No</td></tr><tr><td><code>zoomLevel</code></td><td>number</td><td><code>13</code></td><td>No</td></tr><tr><td><code>mapType</code></td><td>string</td><td><code>"roadmap"</code></td><td>No</td></tr><tr><td><code>imageSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imageAlt</code></td><td>string</td><td><code>"Map background"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#map-demo-1">Station directory map</a><a href="#map-demo-2">Compact location preview</a><a href="#map-demo-3">Operations map</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#map-demo-1">OpenStreetMap</a><a href="#map-demo-2">Google Maps</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/marketing-section-header.wrn
-171
View File
@@ -1,171 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page MarketingSectionHeaderDetail {
layout = "showcase"
state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Marketing Section Header example"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default marketing section header for a modern application."
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Marketing Section Header"
state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#marketing-section-header-demo"
state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
state playground_actionExternal = (ctx.url.searchParams.get("pg_actionExternal") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Marketing Section Header"
description = "Introduce marketing content with an eyebrow, title, description, and optional linked action."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Marketing Section Header</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Marketing component</span>
<h1>Marketing Section Header</h1>
<p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p>
<div class="detail-badges"><span>12 props</span><span>3 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="MarketingSectionHeader" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Marketing Section Header</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><MarketingSectionHeader id='{playground_id}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' align='{playground_align}' size='{playground_size}' color='{playground_color}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' actionIcon='{playground_actionIcon}' actionExternal='{playground_actionExternal}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;MarketingSectionHeader
title="Marketing Section Header example"
description="A polished default marketing section header for a modern application."
align="start"
actionLabel="Marketing Section Header"
actionHref="#marketing-section-header-demo"&gt;
&lt;div data-slot="icon"&gt;
&lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/MarketingSectionHeader&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-marketing-section-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-marketing-section-header-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-marketing-section-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-marketing-section-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-marketing-section-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-marketing-section-header-title" name="pg_title" type="text" value="Marketing Section Header example" /></label><label class="playground-field" for="playground-marketing-section-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-marketing-section-header-description" name="pg_description" type="text" value="A polished default marketing section header for a modern application." /></label><label class="playground-field" for="playground-marketing-section-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-marketing-section-header-align" name="pg_align"><option value="start" selected>start</option><option value="split">split</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-marketing-section-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-marketing-section-header-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-marketing-section-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-marketing-section-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marketing-section-header-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-marketing-section-header-actionLabel" name="pg_actionLabel" type="text" value="Marketing Section Header" /></label><label class="playground-field" for="playground-marketing-section-header-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-marketing-section-header-actionHref" name="pg_actionHref" type="text" value="#marketing-section-header-demo" /></label><label class="playground-field" for="playground-marketing-section-header-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-marketing-section-header-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-marketing-section-header-actionExternal"><span><strong>action External</strong><small>boolean</small></span><input id="playground-marketing-section-header-actionExternal" name="pg_actionExternal" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-marketing-section-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-marketing-section-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Split header with action</h2><p>Pair marketing copy with a clear secondary navigation action.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="marketing-section-header-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" /></div>
</div>
<section class="demo-code" aria-label="Split header with action usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;MarketingSectionHeader
eyebrow="Platform capabilities"
title="Build complete public experiences"
description="Use reusable sections, cards, metrics, heroes, and CTAs."
actionLabel="Explore components"
actionHref="#components"
actionIcon="icon-[lucide--arrow-right]"&gt;
&lt;div data-slot="icon"&gt;
&lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/MarketingSectionHeader&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Centered marketing header</h2><p>Use a centered configuration above campaigns, proof, and feature collections.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="marketing-section-header-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><MarketingSectionHeader eyebrow="Why WRNexusJS" title="One coherent design system" description="Consistent presentation across public pages and product applications." align="center" size="compact" actionLabel="Compact example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Centered marketing header usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;MarketingSectionHeader
eyebrow="Why WRNexusJS"
title="One coherent design system"
description="Consistent presentation across public pages and product applications."
align="center"
size="compact"
actionLabel="Compact example"
actionHref="#marketing-section-header-demo"&gt;
&lt;div data-slot="icon"&gt;
&lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/MarketingSectionHeader&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>External resource header</h2><p>Link to supporting documentation or an external resource.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="marketing-section-header-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><MarketingSectionHeader eyebrow="Developer resources" title="Learn the framework through working examples" description="Every component page includes live demos, playground controls, events, and API details." align="split" size="large" actionLabel="Open documentation" actionHref="https://wrnexusjs.dev" actionExternal="true" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="External resource header usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;MarketingSectionHeader
eyebrow="Developer resources"
title="Learn the framework through working examples"
description="Every component page includes live demos, playground controls, events, and API details."
size="large"
actionLabel="Open documentation"
actionHref="https://wrnexusjs.dev"
actionExternal="true"&gt;
&lt;div data-slot="icon"&gt;
&lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/MarketingSectionHeader&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"split"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionExternal</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marketing-section-header-demo-1">Split header with action</a><a href="#marketing-section-header-demo-2">Centered marketing header</a><a href="#marketing-section-header-demo-3">External resource header</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/hero-actions"><small>Previous</small><strong>← Hero Actions</strong></a>
<a href="/components/page-header"><small>Next</small><strong>Page Header →</strong></a>
</nav>
}
}
app/pages/components/marquee.wrn
+194 -174
View File
@@ -33,118 +33,123 @@ page MarqueeDetail {
<div class="playground-preview-source" data-playground-preview><Marquee size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Marquee size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Marquee <pre><code data-playground-code>page MarqueeExample <span>&#123;</span>
title="Marquee example" state items = [
description="A polished default marquee for a modern application." <span>&#123;</span>
items='[ "id": "marquee-0-1",
<span>&#123;</span> "key": "marquee-0-1",
"id": "marquee-0-1", "value": "primary",
"key": "marquee-0-1", "label": "Primary workflow",
"value": "primary", "title": "Primary workflow",
"label": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"title": "Primary workflow", "text": "A configurable sample message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#marquee-demo",
"text": "A configurable sample message.", "actionHref": "#marquee-demo",
"href": "#marquee-demo", "actionLabel": "View details",
"actionHref": "#marquee-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": true,
"time": "09:30", "selected": true,
"current": true, "checked": true,
"selected": true, "disabled": false,
"checked": true, "outgoing": false,
"disabled": false, "open": true,
"outgoing": false, "number": 1,
"open": true, "count": 16,
"number": 1, "percentage": 72,
"count": 16, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 1",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>,
] <span>&#123;</span>
<span>&#125;</span>, "id": "marquee-0-2",
<span>&#123;</span> "key": "marquee-0-2",
"id": "marquee-0-2", "value": "secondary",
"key": "marquee-0-2", "label": "Additional option",
"value": "secondary", "title": "Supporting example",
"label": "Additional option", "description": "A clean default configuration for everyday product interfaces.",
"title": "Supporting example", "text": "Another configurable message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#marquee-demo",
"text": "Another configurable message.", "actionHref": "#marquee-demo",
"href": "#marquee-demo", "actionLabel": "View details",
"actionHref": "#marquee-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": false,
"time": "09:30", "selected": false,
"current": false, "checked": false,
"selected": false, "disabled": false,
"checked": false, "outgoing": true,
"disabled": false, "open": true,
"outgoing": true, "number": 2,
"open": true, "count": 32,
"number": 2, "percentage": 72,
"count": 32, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 2",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>
] ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;Marquee
/&gt;</code></pre> title="Marquee example"
description="A polished default marquee for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -273,32 +278,37 @@ page MarqueeDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="marquee-demo-1" class="demo-canvas demo-canvas--1"> <div id="marquee-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Marquee size="default" title="Supported capabilities" description="A polished default marquee for a modern application." items='[{"label":"SSR"},{"label":"CSR"},{"label":"Themes"},{"label":"Accessibility"},{"label":"Responsive UI"}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Marquee size="default" title="Supported capabilities" description="A polished default marquee for a modern application." items='[{"label":"SSR"},{"label":"CSR"},{"label":"Themes"},{"label":"Accessibility"},{"label":"Responsive UI"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Partner and capability strip usage"> <section class="demo-code" aria-label="Partner and capability strip usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Marquee <pre><code>page MarqueeExample <span>&#123;</span>
title="Supported capabilities" state items = [
description="A polished default marquee for a modern application." <span>&#123;</span>
items='[ "label": "SSR"
<span>&#123;</span> <span>&#125;</span>,
"label": "SSR" <span>&#123;</span>
<span>&#125;</span>, "label": "CSR"
<span>&#123;</span> <span>&#125;</span>,
"label": "CSR" <span>&#123;</span>
<span>&#125;</span>, "label": "Themes"
<span>&#123;</span> <span>&#125;</span>,
"label": "Themes" <span>&#123;</span>
<span>&#125;</span>, "label": "Accessibility"
<span>&#123;</span> <span>&#125;</span>,
"label": "Accessibility" <span>&#123;</span>
<span>&#125;</span>, "label": "Responsive UI"
<span>&#123;</span> <span>&#125;</span>
"label": "Responsive UI" ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;Marquee
/&gt;</code></pre> title="Supported capabilities"
description="A polished default marquee for a modern application."
items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -310,28 +320,33 @@ page MarqueeDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="marquee-demo-2" class="demo-canvas demo-canvas--2"> <div id="marquee-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Marquee size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"All services operational"},{"label":"New components published"},{"label":"Documentation updated"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Marquee size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"All services operational"},{"label":"New components published"},{"label":"Documentation updated"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact announcement ticker usage"> <section class="demo-code" aria-label="Compact announcement ticker usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Marquee <pre><code>page MarqueeExample <span>&#123;</span>
size="sm" state items = [
title="Compact Marquee" <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." "label": "All services operational"
items='[ <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "All services operational" "label": "New components published"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "New components published" "label": "Documentation updated"
<span>&#125;</span>, <span>&#125;</span>
<span>&#123;</span> ]
"label": "Documentation updated" view <span>&#123;</span>
<span>&#125;</span> &lt;Marquee
]' size="sm"
variant="soft" title="Compact Marquee"
/&gt;</code></pre> description="A compact configuration for dashboards and dense product surfaces."
items="<span>&#123;</span>items<span>&#125;</span>"
variant="soft"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -343,32 +358,37 @@ page MarqueeDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="marquee-demo-3" class="demo-canvas demo-canvas--3"> <div id="marquee-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Marquee size="lg" color="info" title="Built for complete digital platforms" description="A richer configuration demonstrating additional content and hierarchy." items='[{"label":"Public portals","icon":"icon-[lucide--landmark]"},{"label":"Enterprise systems","icon":"icon-[lucide--building-2]"},{"label":"Developer tools","icon":"icon-[lucide--code-2]"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Marquee size="lg" color="info" title="Built for complete digital platforms" description="A richer configuration demonstrating additional content and hierarchy." items='[{"label":"Public portals","icon":"icon-[lucide--landmark]"},{"label":"Enterprise systems","icon":"icon-[lucide--building-2]"},{"label":"Developer tools","icon":"icon-[lucide--code-2]"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Large visual marquee usage"> <section class="demo-code" aria-label="Large visual marquee usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Marquee <pre><code>page MarqueeExample <span>&#123;</span>
size="lg" state items = [
color="info" <span>&#123;</span>
title="Built for complete digital platforms" "label": "Public portals",
description="A richer configuration demonstrating additional content and hierarchy." "icon": "icon-[lucide--landmark]"
items='[ <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Public portals", "label": "Enterprise systems",
"icon": "icon-[lucide--landmark]" "icon": "icon-[lucide--building-2]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Enterprise systems", "label": "Developer tools",
"icon": "icon-[lucide--building-2]" "icon": "icon-[lucide--code-2]"
<span>&#125;</span>, <span>&#125;</span>
<span>&#123;</span> ]
"label": "Developer tools", view <span>&#123;</span>
"icon": "icon-[lucide--code-2]" &lt;Marquee
<span>&#125;</span> size="lg"
]' color="info"
variant="raised" title="Built for complete digital platforms"
/&gt;</code></pre> description="A richer configuration demonstrating additional content and hierarchy."
items="<span>&#123;</span>items<span>&#125;</span>"
variant="raised"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/mega-menu.wrn
+889 -199
View File
File diff suppressed because it is too large. Load diff
app/pages/components/metric-card.wrn
+7 -7
View File
@@ -26,7 +26,7 @@ page MetricCardDetail {
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "lift" state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "none"
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start" state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo { seo {
@@ -73,7 +73,7 @@ page MetricCardDetail {
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-metric-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-metric-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="down">down</option><option value="positive">positive</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-progress"><span><strong>progress</strong><small>number</small></span><input id="playground-metric-card-progress" name="pg_progress" type="number" value="-1" /></label><label class="playground-field" for="playground-metric-card-progressLabel"><span><strong>progress Label</strong><small>string</small></span><input id="playground-metric-card-progressLabel" name="pg_progressLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-metric-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-metric-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-metric-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-metric-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-metric-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-metLine truncated <div class="playground-fields"><label class="playground-field" for="playground-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-metric-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-metric-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="down">down</option><option value="positive">positive</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-progress"><span><strong>progress</strong><small>number</small></span><input id="playground-metric-card-progress" name="pg_progress" type="number" value="-1" /></label><label class="playground-field" for="playground-metric-card-progressLabel"><span><strong>progress Label</strong><small>string</small></span><input id="playground-metric-card-progressLabel" name="pg_progressLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-metric-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-metric-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-metric-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-metric-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-metric-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-metLine truncated
</form> </form>
</div> </div>
</section> </section>
@@ -88,7 +88,7 @@ page MetricCardDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="metric-card-demo-1" class="demo-canvas demo-canvas--1"> <div id="metric-card-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><MetricCard label="Availability" value="99.9" description="Target service availability." icon="icon-[lucide--activity]" suffix="%" trend="Stable" trendLabel="30 days" trendDirection="positive" progress="-1" progressLabel="Metric Card" href="#status" external="false" actionLabel="Open status" showArrow="true" selectable="false" disabled="false" size="default" color="success" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><MetricCard label="Availability" value="99.9" description="Target service availability." icon="icon-[lucide--activity]" suffix="%" trend="Stable" trendLabel="30 days" trendDirection="positive" progress="-1" progressLabel="Metric Card" href="#status" external="false" actionLabel="Open status" showArrow="true" selectable="false" disabled="false" size="default" color="success" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Operational KPI usage"> <section class="demo-code" aria-label="Operational KPI usage">
@@ -122,7 +122,7 @@ page MetricCardDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="metric-card-demo-2" class="demo-canvas demo-canvas--2"> <div id="metric-card-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><MetricCard label="Profile completion" value="72" description="Complete the remaining account and security steps." icon="icon-[lucide--circle-user-round]" suffix="%" trendLabel="Compact example" progress="72" progressLabel="Account setup" href="#metric-card-demo" external="false" actionLabel="Compact example" showArrow="true" selectable="false" disabled="false" size="sm" color="info" variant="soft" align="center" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><MetricCard label="Profile completion" value="72" description="Complete the remaining account and security steps." icon="icon-[lucide--circle-user-round]" suffix="%" trendLabel="Compact example" progress="72" progressLabel="Account setup" href="#metric-card-demo" external="false" actionLabel="Compact example" showArrow="true" selectable="false" disabled="false" size="sm" color="info" variant="soft" align="center" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Progress metric usage"> <section class="demo-code" aria-label="Progress metric usage">
@@ -157,7 +157,7 @@ page MetricCardDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="metric-card-demo-3" class="demo-canvas demo-canvas--3"> <div id="metric-card-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><MetricCard label="Open complaints" value="38" description="Cases waiting for review or assignment." icon="icon-[lucide--inbox]" badge="Needs review" trendLabel="Advanced example" progress="-1" progressLabel="Advanced example" href="#queue" external="false" actionLabel="Review queue" showArrow="true" selectable="true" disabled="false" size="lg" color="warning" variant="raised" hover="glow" align="end" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><MetricCard label="Open complaints" value="38" description="Cases waiting for review or assignment." icon="icon-[lucide--inbox]" badge="Needs review" trendLabel="Advanced example" progress="-1" progressLabel="Advanced example" href="#queue" external="false" actionLabel="Review queue" showArrow="true" selectable="true" disabled="false" size="lg" color="warning" variant="raised" hover="glow" align="end" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Selectable dashboard metric usage"> <section class="demo-code" aria-label="Selectable dashboard metric usage">
@@ -199,7 +199,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
console.log("action", payload) console.log("action", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Metric"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"0"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trend</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendDirection</code></td><td>string</td><td><code>"neutral"</code></td><td>No</td></tr><tr><td><code>progress</code></td><td>number</td><td><code>-1</code></td><td>No</td></tr><tr><td><code>progressLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Metric"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"0"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trend</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendDirection</code></td><td>string</td><td><code>"neutral"</code></td><td>No</td></tr><tr><td><code>progress</code></td><td>number</td><td><code>-1</code></td><td>No</td></tr><tr><td><code>progressLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-card-demo-1">Operational KPI</a><a href="#metric-card-demo-2">Progress metric</a><a href="#metric-card-demo-3">Selectable dashboard metric</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-card-demo-1">Operational KPI</a><a href="#metric-card-demo-2">Progress metric</a><a href="#metric-card-demo-3">Selectable dashboard metric</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
@@ -207,7 +207,7 @@ if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
<span></span> <span></span>
<a href="/components/metric-grid"><small>Next</small><strong>Metric Grid →</strong></a> <span></span>
</nav> </nav>
} }
} }
app/pages/components/metric-grid.wrn
-392
View File
@@ -1,392 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page MetricGridDetail {
layout = "showcase"
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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\"}]")
state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2")
state playground_mobileColumns = Number(ctx.url.searchParams.get("pg_mobileColumns") ?? "1")
state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
state playground_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "true") === "true"
state playground_dividers = (ctx.url.searchParams.get("pg_dividers") ?? "false") === "true"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
state playground_minItemWidth = ctx.url.searchParams.get("pg_minItemWidth") ?? ""
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Metric Grid"
description = "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/data">Data</a><span aria-hidden="true">/</span><span>Metric Grid</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Data component</span>
<h1>Metric Grid</h1>
<p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p>
<div class="detail-badges"><span>13 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="MetricGrid" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,action">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Metric Grid</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><MetricGrid items='{playground_items}' columns='{playground_columns}' tabletColumns='{playground_tabletColumns}' mobileColumns='{playground_mobileColumns}' gap='{playground_gap}' equalHeight='{playground_equalHeight}' dividers='{playground_dividers}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' maxWidth='{playground_maxWidth}' minItemWidth='{playground_minItemWidth}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;MetricGrid
items='[
<span>&#123;</span>
"id": "metric-grid-0-1",
"key": "metric-grid-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": "#metric-grid-demo",
"actionHref": "#metric-grid-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "metric-grid-0-2",
"key": "metric-grid-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#metric-grid-demo",
"actionHref": "#metric-grid-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-metric-grid-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-metric-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123;
"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"
&#125;,
&#123;
"label": "Police stations",
"value": "126",
"description": "Searchable station and jurisdiction entries.",
"icon": "icon-[lucide--landmark]",
"trend": "Updated",
"trendLabel": "today",
"color": "info"
&#125;,
&#123;
"label": "Availability",
"value": "99.9",
"suffix": "%",
"description": "Target service availability.",
"icon": "icon-[lucide--activity]",
"trend": "Stable",
"trendLabel": "30 days",
"trendDirection": "positive",
"color": "success"
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-metric-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-metric-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-metric-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-metric-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-metric-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-metric-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-metric-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-metric-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-metric-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-metric-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-metric-grid-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-metric-grid-dividers" name="pg_dividers" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-metric-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-metric-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-metric-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-metric-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-metric-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-metric-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-metric-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-metric-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-metric-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-field" for="playground-metric-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-metric-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Three-column KPI grid</h2><p>Display operational values in a full-width, responsive grid.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="metric-grid-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" /></div>
</div>
<section class="demo-code" aria-label="Three-column KPI grid usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;MetricGrid
items='[
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Police stations",
"value": "126",
"description": "Searchable station and jurisdiction entries.",
"icon": "icon-[lucide--landmark]",
"trend": "Updated",
"trendLabel": "today",
"color": "info"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Availability",
"value": "99.9",
"suffix": "%",
"description": "Target service availability.",
"icon": "icon-[lucide--activity]",
"trend": "Stable",
"trendLabel": "30 days",
"trendDirection": "positive",
"color": "success"
<span>&#125;</span>
]'
columns="3"
gap="lg"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Unified metrics bar</h2><p>Use dividers to present compact metrics as one cohesive surface.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="metric-grid-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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="none" equalHeight="true" dividers="true" size="sm" variant="secondary" maxWidth="wide" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Unified metrics bar usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;MetricGrid
items='[
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Police stations",
"value": "126",
"description": "Searchable station and jurisdiction entries.",
"icon": "icon-[lucide--landmark]",
"trend": "Updated",
"trendLabel": "today",
"color": "info"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Availability",
"value": "99.9",
"suffix": "%",
"description": "Target service availability.",
"icon": "icon-[lucide--activity]",
"trend": "Stable",
"trendLabel": "30 days",
"trendDirection": "positive",
"color": "success"
<span>&#125;</span>
]'
columns="3"
gap="none"
dividers="true"
size="sm"
variant="secondary"
maxWidth="wide"
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Auto-fit monitoring grid</h2><p>Allow cards to wrap automatically when the number of metrics changes.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="metric-grid-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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"},{"label":"Response time","value":"1.8","suffix":"s","description":"Median API response","icon":"icon-[lucide--timer]","color":"warning","progress":72,"progressLabel":"Target"}]' columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="lg" variant="soft" maxWidth="full" minItemWidth="17rem" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Auto-fit monitoring grid usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;MetricGrid
items='[
<span>&#123;</span>
"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"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Police stations",
"value": "126",
"description": "Searchable station and jurisdiction entries.",
"icon": "icon-[lucide--landmark]",
"trend": "Updated",
"trendLabel": "today",
"color": "info"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Availability",
"value": "99.9",
"suffix": "%",
"description": "Target service availability.",
"icon": "icon-[lucide--activity]",
"trend": "Stable",
"trendLabel": "30 days",
"trendDirection": "positive",
"color": "success"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Response time",
"value": "1.8",
"suffix": "s",
"description": "Median API response",
"icon": "icon-[lucide--timer]",
"color": "warning",
"progress": 72,
"progressLabel": "Target"
<span>&#125;</span>
]'
size="lg"
variant="soft"
minItemWidth="17rem"
/&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@action</code><span>Fires when the component's primary or item action is activated.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;MetricGrid
@select='console.log(payload)'
@action='console.log(payload)'
/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"MetricGrid\"], [data-component=\"MetricGrid\"]")
if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
console.log("select", payload)
<span>&#125;</span>)
if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
console.log("action", payload)
<span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>tabletColumns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>mobileColumns</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>equalHeight</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>dividers</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-grid-demo-1">Three-column KPI grid</a><a href="#metric-grid-demo-2">Unified metrics bar</a><a href="#metric-grid-demo-3">Auto-fit monitoring grid</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/metric-card"><small>Previous</small><strong>← Metric Card</strong></a>
<a href="/components/stats-bar"><small>Next</small><strong>Stats Bar →</strong></a>
</nav>
}
}
app/pages/components/modal.wrn
+81 -9
View File
@@ -11,6 +11,7 @@ page ModalDetail {
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "center" state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "center"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_showHeader = (ctx.url.searchParams.get("pg_showHeader") ?? "true") === "true"
state playground_showClose = (ctx.url.searchParams.get("pg_showClose") ?? "true") === "true" state playground_showClose = (ctx.url.searchParams.get("pg_showClose") ?? "true") === "true"
state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Modal" state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Modal"
state playground_closeOnBackdrop = (ctx.url.searchParams.get("pg_closeOnBackdrop") ?? "true") === "true" state playground_closeOnBackdrop = (ctx.url.searchParams.get("pg_closeOnBackdrop") ?? "true") === "true"
@@ -43,7 +44,7 @@ page ModalDetail {
<span class="showcase-eyebrow">Overlays component</span> <span class="showcase-eyebrow">Overlays component</span>
<h1>Modal</h1> <h1>Modal</h1>
<p>Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.</p> <p>Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.</p>
<div class="detail-badges"><span>29 props</span><span>4 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>30 props</span><span>4 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -52,7 +53,7 @@ page ModalDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Modal open='{playground_open}' defaultOpen='{playground_defaultOpen}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' label='{playground_label}' size='{playground_size}' placement='{playground_placement}' color='{playground_color}' variant='{playground_variant}' showClose='{playground_showClose}' closeLabel='{playground_closeLabel}' closeOnBackdrop='{playground_closeOnBackdrop}' closeOnEscape='{playground_closeOnEscape}' closeOnCancel='{playground_closeOnCancel}' closeOnConfirm='{playground_closeOnConfirm}' showFooter='{playground_showFooter}' cancelLabel='{playground_cancelLabel}' cancelIcon='{playground_cancelIcon}' confirmLabel='{playground_confirmLabel}' confirmIcon='{playground_confirmIcon}' confirmDisabled='{playground_confirmDisabled}' confirmLoading='{playground_confirmLoading}' destructive='{playground_destructive}' triggerLabel='{playground_triggerLabel}' triggerIcon='{playground_triggerIcon}' scrollable='{playground_scrollable}' scrollBehavior='{playground_scrollBehavior}' class='{playground_class}'><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div> <div class="playground-preview-source" data-playground-preview><Modal open='{playground_open}' defaultOpen='{playground_defaultOpen}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' label='{playground_label}' size='{playground_size}' placement='{playground_placement}' color='{playground_color}' variant='{playground_variant}' showHeader='{playground_showHeader}' showClose='{playground_showClose}' closeLabel='{playground_closeLabel}' closeOnBackdrop='{playground_closeOnBackdrop}' closeOnEscape='{playground_closeOnEscape}' closeOnCancel='{playground_closeOnCancel}' closeOnConfirm='{playground_closeOnConfirm}' showFooter='{playground_showFooter}' cancelLabel='{playground_cancelLabel}' cancelIcon='{playground_cancelIcon}' confirmLabel='{playground_confirmLabel}' confirmIcon='{playground_confirmIcon}' confirmDisabled='{playground_confirmDisabled}' confirmLoading='{playground_confirmLoading}' destructive='{playground_destructive}' triggerLabel='{playground_triggerLabel}' triggerIcon='{playground_triggerIcon}' scrollable='{playground_scrollable}' scrollBehavior='{playground_scrollBehavior}' class='{playground_class}'><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Modal <pre><code data-playground-code>&lt;Modal
@@ -78,8 +79,8 @@ page ModalDetail {
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>29 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>30 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-toggle" for="playground-modal-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-modal-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-modal-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-title"><span><strong>title</strong><small>string</small></span><input id="playground-modal-title" name="pg_title" type="text" value="Modal playground" /></label><label class="playground-field" for="playground-modal-description"><span><strong>description</strong><small>string</small></span><input id="playground-modal-description" name="pg_description" type="text" value="A polished default modal for a modern application." /></label><label class="playground-field" for="playground-modal-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-modal-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-modal-label"><span><strong>label</strong><small>string</small></span><input id="playground-modal-label" name="pg_label" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-size"><span><strong>size</strong><small>string</small></span><select id="playground-modal-size" name="pg_size"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="xs">xs</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-modal-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-modal-placement" name="pg_placement"><option value="center" selected>center</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-modal-color"><span><strong>color</strong><small>string</small></span><select id="playground-modal-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-modal-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-modal-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="outline">outline</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-modal-showClose"><span><strong>show Close</strong><small>boolean</small></span><input id="playground-modal-showClose" name="pg_showClose" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-modal-closeLabel" name="pg_closeLabel" type="text" value="Modal" /></label><label class="playground-toggle" for="playground-modal-closeOnBackdrop"><span><strong>close On Backdrop</strong><small>boolean</small></span><input id="playground-modal-closeOnBackdrop" name="pg_closeOnBackdrop" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-closeOnEscape"><span><strong>close On Escape</strong><small>boolean</small></span><input id="playground-modal-closeOnEscape" name="pg_closeOnEscape" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-closeOnCancel"><span><strong>close On Cancel</strong><small>boolean</small></span><input id="playground-modal-closeOnCancel" name="pg_closeOnCancel" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label claLine truncated <div class="playground-fields"><label class="playground-toggle" for="playground-modal-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-modal-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-modal-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-title"><span><strong>title</strong><small>string</small></span><input id="playground-modal-title" name="pg_title" type="text" value="Modal playground" /></label><label class="playground-field" for="playground-modal-description"><span><strong>description</strong><small>string</small></span><input id="playground-modal-description" name="pg_description" type="text" value="A polished default modal for a modern application." /></label><label class="playground-field" for="playground-modal-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-modal-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-modal-label"><span><strong>label</strong><small>string</small></span><input id="playground-modal-label" name="pg_label" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-size"><span><strong>size</strong><small>string</small></span><select id="playground-modal-size" name="pg_size"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="default">default</option><option value="xs">xs</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-modal-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-modal-placement" name="pg_placement"><option value="center" selected>center</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom">bottom</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-modal-color"><span><strong>color</strong><small>string</small></span><select id="playground-modal-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-modal-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-modal-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="outline">outline</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-modal-showHeader"><span><strong>show Header</strong><small>boolean</small></span><input id="playground-modal-showHeader" name="pg_showHeader" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-showClose"><span><strong>show Close</strong><small>boolean</small></span><input id="playground-modal-showClose" name="pg_showClose" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-modal-closeLabel" name="pg_closeLabel" type="text" value="Modal" /></label><label class="playground-toggle" for="playground-modal-closeOnBackdrop"><span><strong>close On Backdrop</strong><small>boolean</small></span><input id="playground-modal-closeOnBackdrop" name="pg_closeOnBackdrop" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-closeOnEscape"><span><strong>close On Escape</strong><small>boolean</small></span><input id="playground-modal-closeOnEscape" name="pg_closeOnEscape" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playgrounLine truncated
</form> </form>
</div> </div>
</section> </section>
@@ -95,7 +96,7 @@ page ModalDetail {
<div id="modal-demo-1" class="demo-canvas demo-canvas--1"> <div id="modal-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p> <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
<div class="demo-render"><Modal open="false" defaultOpen="false" title="Confirm service request" description="Review the information before continuing." icon="icon-[lucide--shield-check]" label="Modal" size="md" variant="default" showClose="true" closeLabel="Modal" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Go back" confirmLabel="Confirm request" confirmIcon="icon-[lucide--check]" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open modal" triggerIcon="icon-[lucide--square-stack]" scrollable="true" class="showcase-instance showcase-instance--1"><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div> <div class="demo-render"><Modal open="false" defaultOpen="false" title="Confirm service request" description="Review the information before continuing." icon="icon-[lucide--shield-check]" label="Modal" size="md" variant="default" showHeader="true" showClose="true" closeLabel="Modal" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Go back" confirmLabel="Confirm request" confirmIcon="icon-[lucide--check]" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open modal" triggerIcon="icon-[lucide--square-stack]" scrollable="true" class="showcase-instance showcase-instance--1"><div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div></Modal></div>
</div> </div>
<section class="demo-code" aria-label="Confirmation modal usage"> <section class="demo-code" aria-label="Confirmation modal usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -133,7 +134,7 @@ page ModalDetail {
<div id="modal-demo-2" class="demo-canvas demo-canvas--2"> <div id="modal-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p> <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
<div class="demo-render"><Modal open="false" defaultOpen="false" title="Delete this record?" description="This action cannot be undone." icon="icon-[lucide--arrow-right]" label="Compact example" size="sm" variant="outline" showClose="true" closeLabel="Compact example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Keep record" confirmLabel="Delete record" confirmDisabled="false" confirmLoading="false" destructive="true" triggerLabel="Delete record" scrollable="true" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Modal open="false" defaultOpen="false" title="Delete this record?" description="This action cannot be undone." icon="icon-[lucide--arrow-right]" label="Compact example" size="sm" variant="outline" showHeader="true" showClose="true" closeLabel="Compact example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Keep record" confirmLabel="Delete record" confirmDisabled="false" confirmLoading="false" destructive="true" triggerLabel="Delete record" scrollable="true" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Destructive confirmation usage"> <section class="demo-code" aria-label="Destructive confirmation usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -171,7 +172,7 @@ page ModalDetail {
<div id="modal-demo-3" class="demo-canvas demo-canvas--3"> <div id="modal-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p> <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
<div class="demo-render"><Modal open="false" defaultOpen="false" title="Create service request" description="Complete the required information." icon="icon-[lucide--trash-2]" label="Advanced example" size="lg" variant="soft" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Advanced example" confirmLabel="Submit request" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open request form" triggerIcon="icon-[lucide--file-plus-2]" scrollable="true" class="showcase-instance showcase-instance--3"><div class="showcase-overlay-content showcase-overlay-content--tall"><label>Request title<input value="Sample request" /></label><label>Description<textarea>Supporting information</textarea></label></div></Modal></div> <div class="demo-render"><Modal open="false" defaultOpen="false" title="Create service request" description="Complete the required information." icon="icon-[lucide--trash-2]" label="Advanced example" size="lg" variant="soft" showHeader="true" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="Advanced example" confirmLabel="Submit request" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open request form" triggerIcon="icon-[lucide--file-plus-2]" scrollable="true" class="showcase-instance showcase-instance--3"><div class="showcase-overlay-content showcase-overlay-content--tall"><label>Request title<input value="Sample request" /></label><label>Description<textarea>Supporting information</textarea></label></div></Modal></div>
</div> </div>
<section class="demo-code" aria-label="Scrollable form modal usage"> <section class="demo-code" aria-label="Scrollable form modal usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -197,6 +198,77 @@ page ModalDetail {
&lt;div data-slot="footer"&gt; &lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt; &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/Modal&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Custom header and footer</h2><p>Supply your own header, body, and footer actions.</p></div>
<span class="demo-case-number">04</span>
</header>
<div class="demo-workbench">
<div id="modal-demo-4" class="demo-canvas demo-canvas--4">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
<div class="demo-render"><Modal open="false" defaultOpen="false" title="" description="" icon="icon-[lucide--trash-2]" label="Advanced example" size="lg" variant="success" showHeader="true" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="true" cancelLabel="" confirmLabel="" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open custom dialog" scrollable="true" class="showcase-instance showcase-instance--4"><div data-slot="header"><h2>Invite a teammate</h2></div><p>Give your teammate access to your workspace.</p><div data-slot="footer"><button type="button" class="showcase-action" data-modal-close="true">Done</button></div></Modal></div>
</div>
<section class="demo-code" aria-label="Custom header and footer usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Modal
icon="icon-[lucide--trash-2]"
label="Advanced example"
size="lg"
variant="success"
closeLabel="Advanced example"
triggerLabel="Open custom dialog"&gt;
&lt;div data-slot="trigger"&gt;
&lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="header"&gt;
&lt;h2&gt;Invite a teammate&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;Give your teammate access to your workspace.&lt;/p&gt;
&lt;div data-slot="footer"&gt;
&lt;button type="button" class="showcase-action" data-modal-close="true"&gt;Done&lt;/button&gt;
&lt;/div&gt;
&lt;/Modal&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Centered content</h2><p>Omit the standard header and footer for a fully custom composition.</p></div>
<span class="demo-case-number">05</span>
</header>
<div class="demo-workbench">
<div id="modal-demo-5" class="demo-canvas demo-canvas--5">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p>
<div class="demo-render"><Modal open="false" defaultOpen="false" title="" description="" icon="" label="Advanced example" size="sm" variant="success" showHeader="false" showClose="true" closeLabel="Advanced example" closeOnBackdrop="true" closeOnEscape="true" closeOnCancel="true" closeOnConfirm="false" showFooter="false" cancelLabel="Advanced example" confirmLabel="Advanced example" confirmDisabled="false" confirmLoading="false" destructive="false" triggerLabel="Open centered dialog" scrollable="true" class="showcase-instance showcase-instance--5"><div style="text-align:center;padding:2rem"><h2>You are all set</h2><p>Your preferences have been saved.</p><button type="button" class="showcase-action" data-modal-close="true">Continue</button></div></Modal></div>
</div>
<section class="demo-code" aria-label="Centered content usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Modal
label="Advanced example"
size="sm"
variant="success"
showHeader="false"
closeLabel="Advanced example"
showFooter="false"
cancelLabel="Advanced example"
confirmLabel="Advanced example"
triggerLabel="Open centered dialog"&gt;
&lt;div data-slot="trigger"&gt;
&lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="header"&gt;
&lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
&lt;/div&gt;
&lt;div style="text-align:center;padding:2rem"&gt;&lt;h2&gt;You are all set&lt;/h2&gt;&lt;p&gt;Your preferences have been saved.&lt;/p&gt;&lt;button type="button" class="showcase-action" data-modal-close="true"&gt;Continue&lt;/button&gt;&lt;/div&gt;
&lt;div data-slot="footer"&gt;
&lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Modal&gt;</code></pre> &lt;/Modal&gt;</code></pre>
</section> </section>
</div> </div>
@@ -225,10 +297,10 @@ if (component) registerOutputHandler(component, "cancel", (payload) =&gt; <span>
if (component) registerOutputHandler(component, "confirm", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "confirm", (payload) =&gt; <span>&#123;</span>
console.log("confirm", payload) console.log("confirm", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Modal"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Modal dialog"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"center"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close modal"</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnCancel</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnConfirm</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showFooter</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel"</code></td><td>No</td></tr><tr><td><code>cancelIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmLabel</code></td><td>string</td><td><code>"Confirm"</code></td><td>No</td></tr><tr><td><code>confirmIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>confirmLoading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>destructive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollBehavior</code></td><td>string</td><td><code>"inside"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Modal"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Modal dialog"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"center"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>showHeader</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showClose</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close modal"</code></td><td>No</td></tr><tr><td><code>closeOnBackdrop</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnEscape</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnCancel</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>closeOnConfirm</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showFooter</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel"</code></td><td>No</td></tr><tr><td><code>cancelIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmLabel</code></td><td>string</td><td><code>"Confirm"</code></td><td>No</td></tr><tr><td><code>confirmIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>confirmDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>confirmLoading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>destructive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>triggerLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>triggerIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollBehavior</code></td><td>string</td><td><code>"inside"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#modal-demo-1">Confirmation modal</a><a href="#modal-demo-2">Destructive confirmation</a><a href="#modal-demo-3">Scrollable form modal</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#modal-demo-1">Confirmation modal</a><a href="#modal-demo-2">Destructive confirmation</a><a href="#modal-demo-3">Scrollable form modal</a><a href="#modal-demo-4">Custom header and footer</a><a href="#modal-demo-5">Centered content</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/nav.wrn
+233 -213
View File
@@ -35,118 +35,123 @@ page NavDetail {
<div class="playground-preview-source" data-playground-preview><Nav color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' label='{playground_label}' collapsible='{playground_collapsible}' toggleLabel='{playground_toggleLabel}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Nav color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' label='{playground_label}' collapsible='{playground_collapsible}' toggleLabel='{playground_toggleLabel}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Nav <pre><code data-playground-code>page NavExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "nav-0-1", "id": "nav-0-1",
"key": "nav-0-1", "key": "nav-0-1",
"value": "primary", "value": "primary",
"label": "Primary workflow", "label": "Primary workflow",
"title": "Primary workflow", "title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.", "text": "A configurable sample message.",
"href": "#nav-demo", "href": "#nav-demo",
"actionHref": "#nav-demo", "actionHref": "#nav-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": true, "current": true,
"selected": true, "selected": true,
"checked": true, "checked": true,
"disabled": false, "disabled": false,
"outgoing": false, "outgoing": false,
"open": true, "open": true,
"number": 1, "number": 1,
"count": 16, "count": 16,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 1", "ariaLabel": "Open primary workflow 1",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"id": "nav-0-2", "id": "nav-0-2",
"key": "nav-0-2", "key": "nav-0-2",
"value": "secondary", "value": "secondary",
"label": "Additional option", "label": "Additional option",
"title": "Supporting example", "title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.", "text": "Another configurable message.",
"href": "#nav-demo", "href": "#nav-demo",
"actionHref": "#nav-demo", "actionHref": "#nav-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": false, "current": false,
"selected": false, "selected": false,
"checked": false, "checked": false,
"disabled": false, "disabled": false,
"outgoing": true, "outgoing": true,
"open": true, "open": true,
"number": 2, "number": 2,
"count": 32, "count": 32,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 2", "ariaLabel": "Open primary workflow 2",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span> <span>&#125;</span>
]' ]
label="Nav" view <span>&#123;</span>
toggleLabel="Nav" &lt;Nav
/&gt;</code></pre> items="<span>&#123;</span>items<span>&#125;</span>"
label="Nav"
toggleLabel="Nav"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -275,41 +280,46 @@ page NavDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="nav-demo-1" class="demo-canvas demo-canvas--1"> <div id="nav-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Nav size="default" items='[{"label":"Home","href":"/","value":"home","icon":"icon-[lucide--house]"},{"label":"Inbox","href":"/inbox","value":"inbox","badge":"9"},{"label":"Reports","href":"/reports","value":"reports"},{"label":"Archive","href":"/archive","value":"archive","disabled":true}]' active="inbox" label="Nav" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Nav size="default" items='[{"label":"Home","href":"/","value":"home","icon":"icon-[lucide--house]"},{"label":"Inbox","href":"/inbox","value":"inbox","badge":"9"},{"label":"Reports","href":"/reports","value":"reports"},{"label":"Archive","href":"/archive","value":"archive","disabled":true}]' active="inbox" label="Nav" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Horizontal links usage"> <section class="demo-code" aria-label="Horizontal links usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Nav <pre><code>page NavExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Home", "label": "Home",
"href": "/", "href": "/",
"value": "home", "value": "home",
"icon": "icon-[lucide--house]" "icon": "icon-[lucide--house]"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Inbox", "label": "Inbox",
"href": "/inbox", "href": "/inbox",
"value": "inbox", "value": "inbox",
"badge": "9" "badge": "9"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Reports", "label": "Reports",
"href": "/reports", "href": "/reports",
"value": "reports" "value": "reports"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Archive", "label": "Archive",
"href": "/archive", "href": "/archive",
"value": "archive", "value": "archive",
"disabled": true "disabled": true
<span>&#125;</span> <span>&#125;</span>
]' ]
active="inbox" view <span>&#123;</span>
label="Nav" &lt;Nav
toggleLabel="Nav" items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;</code></pre> active="inbox"
label="Nav"
toggleLabel="Nav"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -321,51 +331,56 @@ page NavDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="nav-demo-2" class="demo-canvas demo-canvas--2"> <div id="nav-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Nav size="sm" items='[{"label":"Home","href":"/","value":"home"},{"label":"Products","value":"products","items":[{"label":"Overview","href":"/p","value":"p-overview"},{"label":"Platform","value":"p-platform","items":[{"label":"Runtime","href":"/p/runtime","value":"runtime"},{"label":"Compiler","href":"/p/compiler","value":"compiler"}]}]}]' active="p-overview" label="Compact example" collapsible="true" toggleLabel="Compact example" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Nav size="sm" items='[{"label":"Home","href":"/","value":"home"},{"label":"Products","value":"products","items":[{"label":"Overview","href":"/p","value":"p-overview"},{"label":"Platform","value":"p-platform","items":[{"label":"Runtime","href":"/p/runtime","value":"runtime"},{"label":"Compiler","href":"/p/compiler","value":"compiler"}]}]}]' active="p-overview" label="Compact example" collapsible="true" toggleLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Nested submenus usage"> <section class="demo-code" aria-label="Nested submenus usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Nav <pre><code>page NavExample <span>&#123;</span>
size="sm" state items = [
items='[ <span>&#123;</span>
<span>&#123;</span> "label": "Home",
"label": "Home", "href": "/",
"href": "/", "value": "home"
"value": "home" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Products",
"label": "Products", "value": "products",
"value": "products", "items": [
"items": [ <span>&#123;</span>
<span>&#123;</span> "label": "Overview",
"label": "Overview", "href": "/p",
"href": "/p", "value": "p-overview"
"value": "p-overview" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Platform",
"label": "Platform", "value": "p-platform",
"value": "p-platform", "items": [
"items": [ <span>&#123;</span>
<span>&#123;</span> "label": "Runtime",
"label": "Runtime", "href": "/p/runtime",
"href": "/p/runtime", "value": "runtime"
"value": "runtime" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Compiler",
"label": "Compiler", "href": "/p/compiler",
"href": "/p/compiler", "value": "compiler"
"value": "compiler" <span>&#125;</span>
<span>&#125;</span> ]
] <span>&#125;</span>
<span>&#125;</span> ]
] <span>&#125;</span>
<span>&#125;</span> ]
]' view <span>&#123;</span>
active="p-overview" &lt;Nav
label="Compact example" size="sm"
toggleLabel="Compact example" items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;</code></pre> active="p-overview"
label="Compact example"
toggleLabel="Compact example"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -377,39 +392,44 @@ page NavDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="nav-demo-3" class="demo-canvas demo-canvas--3"> <div id="nav-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Nav size="lg" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"label":"Team","href":"/team","value":"team","icon":"icon-[lucide--users]"},{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]' active="team" orientation="vertical" label="Advanced example" collapsible="false" toggleLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Nav size="lg" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"label":"Team","href":"/team","value":"team","icon":"icon-[lucide--users]"},{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]' active="team" orientation="vertical" label="Advanced example" collapsible="false" toggleLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Vertical rail usage"> <section class="demo-code" aria-label="Vertical rail usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Nav <pre><code>page NavExample <span>&#123;</span>
size="lg" state items = [
items='[ <span>&#123;</span>
<span>&#123;</span> "label": "Dashboard",
"label": "Dashboard", "href": "/",
"href": "/", "value": "dash",
"value": "dash", "icon": "icon-[lucide--gauge]"
"icon": "icon-[lucide--gauge]" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Team",
"label": "Team", "href": "/team",
"href": "/team", "value": "team",
"value": "team", "icon": "icon-[lucide--users]"
"icon": "icon-[lucide--users]" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Settings",
"label": "Settings", "href": "/settings",
"href": "/settings", "value": "settings",
"value": "settings", "icon": "icon-[lucide--settings]"
"icon": "icon-[lucide--settings]" <span>&#125;</span>
<span>&#125;</span> ]
]' view <span>&#123;</span>
active="team" &lt;Nav
orientation="vertical" size="lg"
label="Advanced example" items="<span>&#123;</span>items<span>&#125;</span>"
collapsible="false" active="team"
toggleLabel="Advanced example" orientation="vertical"
/&gt;</code></pre> label="Advanced example"
collapsible="false"
toggleLabel="Advanced example"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/navbar.wrn
+455 -398
View File
@@ -10,9 +10,18 @@ page NavbarDetail {
state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[{\"id\":\"navbar-0-1\",\"key\":\"navbar-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"navbar-0-2\",\"key\":\"navbar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[{\"id\":\"navbar-0-1\",\"key\":\"navbar-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"navbar-0-2\",\"key\":\"navbar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#navbar-demo\",\"actionHref\":\"#navbar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
state playground_active = ctx.url.searchParams.get("pg_active") ?? "" state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true" state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
state playground_floating = (ctx.url.searchParams.get("pg_floating") ?? "false") === "true"
state playground_startFloating = ctx.url.searchParams.get("pg_startFloating") ?? "0px"
state playground_openOnHover = (ctx.url.searchParams.get("pg_openOnHover") ?? "false") === "true" state playground_openOnHover = (ctx.url.searchParams.get("pg_openOnHover") ?? "false") === "true"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full" state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Navbar" state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Navbar"
state playground_collapseAt = ctx.url.searchParams.get("pg_collapseAt") ?? "900px"
state playground_mobilePanel = ctx.url.searchParams.get("pg_mobilePanel") ?? "content"
state playground_mobileUtilitiesPosition = ctx.url.searchParams.get("pg_mobileUtilitiesPosition") ?? "header"
state playground_gutter = ctx.url.searchParams.get("pg_gutter") ?? "md"
state playground_contentGutter = ctx.url.searchParams.get("pg_contentGutter") ?? "md"
state playground_flushMobile = (ctx.url.searchParams.get("pg_flushMobile") ?? "false") === "true"
state playground_translationPrefix = ctx.url.searchParams.get("pg_translationPrefix") ?? ""
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
state demo_obj_0 = JSON.parse("{\"label\":\"Northwind\",\"description\":\"Console\",\"href\":\"/\"}") state demo_obj_0 = JSON.parse("{\"label\":\"Northwind\",\"description\":\"Console\",\"href\":\"/\"}")
state demo_obj_1 = JSON.parse("{\"label\":\"Northwind\",\"icon\":\"icon-[lucide--box]\",\"href\":\"/\"}") state demo_obj_1 = JSON.parse("{\"label\":\"Northwind\",\"icon\":\"icon-[lucide--box]\",\"href\":\"/\"}")
@@ -30,7 +39,7 @@ page NavbarDetail {
<span class="showcase-eyebrow">Navigation component</span> <span class="showcase-eyebrow">Navigation component</span>
<h1>Navbar</h1> <h1>Navbar</h1>
<p>Theme-aware, responsive navbar component.</p> <p>Theme-aware, responsive navbar component.</p>
<div class="detail-badges"><span>13 props</span><span>2 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>22 props</span><span>4 slots</span><span>5 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -39,13 +48,12 @@ page NavbarDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Navbar size='{playground_size}' color='{playground_color}' label='{playground_label}' topbarLabel='{playground_topbarLabel}' brand='{playground_brand}' items='{playground_items}' actions='{playground_actions}' active='{playground_active}' sticky='{playground_sticky}' openOnHover='{playground_openOnHover}' maxWidth='{playground_maxWidth}' mobileLabel='{playground_mobileLabel}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Navbar size='{playground_size}' color='{playground_color}' label='{playground_label}' topbarLabel='{playground_topbarLabel}' brand='{playground_brand}' items='{playground_items}' actions='{playground_actions}' active='{playground_active}' sticky='{playground_sticky}' floating='{playground_floating}' startFloating='{playground_startFloating}' openOnHover='{playground_openOnHover}' maxWidth='{playground_maxWidth}' mobileLabel='{playground_mobileLabel}' collapseAt='{playground_collapseAt}' mobilePanel='{playground_mobilePanel}' mobileUtilitiesPosition='{playground_mobileUtilitiesPosition}' gutter='{playground_gutter}' contentGutter='{playground_contentGutter}' flushMobile='{playground_flushMobile}' translationPrefix='{playground_translationPrefix}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Navbar <pre><code data-playground-code>page NavbarExample <span>&#123;</span>
label="Navbar" state items = [
topbarLabel="Navbar" <span>&#123;</span>
brand='<span>&#123;</span>
"id": "navbar-0-1", "id": "navbar-0-1",
"key": "navbar-0-1", "key": "navbar-0-1",
"value": "primary", "value": "primary",
@@ -97,237 +105,250 @@ page NavbarDetail {
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span>' <span>&#125;</span>,
items='[ <span>&#123;</span>
<span>&#123;</span> "id": "navbar-0-2",
"id": "navbar-0-1", "key": "navbar-0-2",
"key": "navbar-0-1", "value": "secondary",
"value": "primary", "label": "Additional option",
"label": "Primary workflow", "title": "Supporting example",
"title": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"description": "A clean default configuration for everyday product interfaces.", "text": "Another configurable message.",
"text": "A configurable sample message.", "href": "#navbar-demo",
"href": "#navbar-demo", "actionHref": "#navbar-demo",
"actionHref": "#navbar-demo", "actionLabel": "View details",
"actionLabel": "View details", "icon": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "variant": "primary",
"variant": "primary", "status": "Active",
"status": "Active", "time": "09:30",
"time": "09:30", "current": false,
"current": true, "selected": false,
"selected": true, "checked": false,
"checked": true, "disabled": false,
"disabled": false, "outgoing": true,
"outgoing": false, "open": true,
"open": true, "number": 2,
"number": 1, "count": 32,
"count": 16, "percentage": 72,
"percentage": 72, "color": "#7c3aed",
"color": "#7c3aed", "target": "_self",
"target": "_self", "ariaLabel": "Open primary workflow 2",
"ariaLabel": "Open primary workflow 1", "items": [
"items": [ <span>&#123;</span>
<span>&#123;</span> "label": "Nested option A",
"label": "Nested option A", "value": "nested-a"
"value": "nested-a" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Nested option B",
"label": "Nested option B", "value": "nested-b"
"value": "nested-b" <span>&#125;</span>
<span>&#125;</span> ],
], "links": [
"links": [ <span>&#123;</span>
<span>&#123;</span> "label": "Documentation",
"label": "Documentation", "href": "#documentation"
"href": "#documentation" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "API reference",
"label": "API reference", "href": "#api-reference"
"href": "#api-reference" <span>&#125;</span>
<span>&#125;</span> ],
], "values": [
"values": [ "Included",
"Included", "Standard"
"Standard" ]
] <span>&#125;</span>
<span>&#125;</span>, ]
<span>&#123;</span> state actions = [
"id": "navbar-0-2", <span>&#123;</span>
"key": "navbar-0-2", "id": "navbar-0-1",
"value": "secondary", "key": "navbar-0-1",
"label": "Additional option", "value": "primary",
"title": "Supporting example", "label": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.", "title": "Primary workflow",
"text": "Another configurable message.", "description": "A clean default configuration for everyday product interfaces.",
"href": "#navbar-demo", "text": "A configurable sample message.",
"actionHref": "#navbar-demo", "href": "#navbar-demo",
"actionLabel": "View details", "actionHref": "#navbar-demo",
"icon": "icon-[lucide--sparkles]", "actionLabel": "View details",
"iconClass": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"variant": "primary", "iconClass": "icon-[lucide--sparkles]",
"status": "Active", "variant": "primary",
"time": "09:30", "status": "Active",
"current": false, "time": "09:30",
"selected": false, "current": true,
"checked": false, "selected": true,
"disabled": false, "checked": true,
"outgoing": true, "disabled": false,
"open": true, "outgoing": false,
"number": 2, "open": true,
"count": 32, "number": 1,
"percentage": 72, "count": 16,
"color": "#7c3aed", "percentage": 72,
"target": "_self", "color": "#7c3aed",
"ariaLabel": "Open primary workflow 2", "target": "_self",
"items": [ "ariaLabel": "Open primary workflow 1",
<span>&#123;</span> "items": [
"label": "Nested option A", <span>&#123;</span>
"value": "nested-a" "label": "Nested option A",
<span>&#125;</span>, "value": "nested-a"
<span>&#123;</span> <span>&#125;</span>,
"label": "Nested option B", <span>&#123;</span>
"value": "nested-b" "label": "Nested option B",
<span>&#125;</span> "value": "nested-b"
], <span>&#125;</span>
"links": [ ],
<span>&#123;</span> "links": [
"label": "Documentation", <span>&#123;</span>
"href": "#documentation" "label": "Documentation",
<span>&#125;</span>, "href": "#documentation"
<span>&#123;</span> <span>&#125;</span>,
"label": "API reference", <span>&#123;</span>
"href": "#api-reference" "label": "API reference",
<span>&#125;</span> "href": "#api-reference"
], <span>&#125;</span>
"values": [ ],
"Included", "values": [
"Standard" "Included",
] "Standard"
<span>&#125;</span> ]
]' <span>&#125;</span>,
actions='[ <span>&#123;</span>
<span>&#123;</span> "id": "navbar-0-2",
"id": "navbar-0-1", "key": "navbar-0-2",
"key": "navbar-0-1", "value": "secondary",
"value": "primary", "label": "Additional option",
"label": "Primary workflow", "title": "Supporting example",
"title": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"description": "A clean default configuration for everyday product interfaces.", "text": "Another configurable message.",
"text": "A configurable sample message.", "href": "#navbar-demo",
"href": "#navbar-demo", "actionHref": "#navbar-demo",
"actionHref": "#navbar-demo", "actionLabel": "View details",
"actionLabel": "View details", "icon": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "variant": "primary",
"variant": "primary", "status": "Active",
"status": "Active", "time": "09:30",
"time": "09:30", "current": false,
"current": true, "selected": false,
"selected": true, "checked": false,
"checked": true, "disabled": false,
"disabled": false, "outgoing": true,
"outgoing": false, "open": true,
"open": true, "number": 2,
"number": 1, "count": 32,
"count": 16, "percentage": 72,
"percentage": 72, "color": "#7c3aed",
"color": "#7c3aed", "target": "_self",
"target": "_self", "ariaLabel": "Open primary workflow 2",
"ariaLabel": "Open primary workflow 1", "items": [
"items": [ <span>&#123;</span>
<span>&#123;</span> "label": "Nested option A",
"label": "Nested option A", "value": "nested-a"
"value": "nested-a" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Nested option B",
"label": "Nested option B", "value": "nested-b"
"value": "nested-b" <span>&#125;</span>
<span>&#125;</span> ],
], "links": [
"links": [ <span>&#123;</span>
<span>&#123;</span> "label": "Documentation",
"label": "Documentation", "href": "#documentation"
"href": "#documentation" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "API reference",
"label": "API reference", "href": "#api-reference"
"href": "#api-reference" <span>&#125;</span>
<span>&#125;</span> ],
], "values": [
"values": [ "Included",
"Included", "Standard"
"Standard" ]
] <span>&#125;</span>
<span>&#125;</span>, ]
<span>&#123;</span> view <span>&#123;</span>
"id": "navbar-0-2", &lt;Navbar
"key": "navbar-0-2", label="Navbar"
"value": "secondary", topbarLabel="Navbar"
"label": "Additional option", brand='<span>&#123;</span>
"title": "Supporting example", "id": "navbar-0-1",
"description": "A clean default configuration for everyday product interfaces.", "key": "navbar-0-1",
"text": "Another configurable message.", "value": "primary",
"href": "#navbar-demo", "label": "Primary workflow",
"actionHref": "#navbar-demo", "title": "Primary workflow",
"actionLabel": "View details", "description": "A clean default configuration for everyday product interfaces.",
"icon": "icon-[lucide--sparkles]", "text": "A configurable sample message.",
"iconClass": "icon-[lucide--sparkles]", "href": "#navbar-demo",
"variant": "primary", "actionHref": "#navbar-demo",
"status": "Active", "actionLabel": "View details",
"time": "09:30", "icon": "icon-[lucide--sparkles]",
"current": false, "iconClass": "icon-[lucide--sparkles]",
"selected": false, "variant": "primary",
"checked": false, "status": "Active",
"disabled": false, "time": "09:30",
"outgoing": true, "current": true,
"open": true, "selected": true,
"number": 2, "checked": true,
"count": 32, "disabled": false,
"percentage": 72, "outgoing": false,
"color": "#7c3aed", "open": true,
"target": "_self", "number": 1,
"ariaLabel": "Open primary workflow 2", "count": 16,
"items": [ "percentage": 72,
<span>&#123;</span> "color": "#7c3aed",
"label": "Nested option A", "target": "_self",
"value": "nested-a" "ariaLabel": "Open primary workflow 1",
<span>&#125;</span>, "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option A",
"value": "nested-b" "value": "nested-a"
<span>&#125;</span> <span>&#125;</span>,
], <span>&#123;</span>
"links": [ "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Documentation", <span>&#125;</span>
"href": "#documentation" ],
<span>&#125;</span>, "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "Documentation",
"href": "#api-reference" "href": "#documentation"
<span>&#125;</span> <span>&#125;</span>,
], <span>&#123;</span>
"values": [ "label": "API reference",
"Included", "href": "#api-reference"
"Standard" <span>&#125;</span>
] ],
<span>&#125;</span> "values": [
]' "Included",
mobileLabel="Navbar"&gt; "Standard"
&lt;div data-slot="topbar"&gt; ]
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt; <span>&#125;</span>'
&lt;/div&gt; items="<span>&#123;</span>items<span>&#125;</span>"
&lt;div data-slot="actions"&gt; actions="<span>&#123;</span>actions<span>&#125;</span>"
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt; mobileLabel="Navbar"&gt;
&lt;/div&gt; &lt;div data-slot="topbar"&gt;
&lt;/Navbar&gt;</code></pre> &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="brand"&gt;
&lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="utilities"&gt;
&lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-navbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-navbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-navbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-navbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-navbar-label"><span><strong>label</strong><small>string</small></span><input id="playground-navbar-label" name="pg_label" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-topbarLabel"><span><strong>topbar Label</strong><small>string</small></span><input id="playground-navbar-topbarLabel" name="pg_topbarLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-brand"><span><strong>brand</strong><small>Record&lt;string, unknown&gt;</small></span><textarea id="playground-navbar-brand" name="pg_brand" rows="5" spellcheck="false" data-playground-json>&#123; <div class="playground-fields"><label class="playground-field" for="playground-navbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-navbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-navbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-navbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-navbar-label"><span><strong>label</strong><small>string</small></span><input id="playground-navbar-label" name="pg_label" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-topbarLabel"><span><strong>topbar Label</strong><small>string</small></span><input id="playground-navbar-topbarLabel" name="pg_topbarLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-brand"><span><strong>brand</strong><small>Record&lt;string, unknown&gt;</small></span><textarea id="playground-navbar-brand" name="pg_brand" rows="5" spellcheck="false" data-playground-json>&#123;
"id": "navbar-0-1", "id": "navbar-0-1",
"key": "navbar-0-1", "key": "navbar-0-1",
@@ -594,7 +615,7 @@ page NavbarDetail {
"Standard" "Standard"
] ]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-navbar-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-floating"><span><strong>floating</strong><small>boolean</small></span><input id="playground-navbar-floating" name="pg_floating" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-startFloating"><span><strong>start Floating</strong><small>string</small></span><input id="playground-navbar-startFloating" name="pg_startFloating" type="text" value="0px" /></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-navbar-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-collapseAt"><span><strong>collapse At</strong><small>string</small></span><input id="playground-navbar-collapseAt" name="pg_collapseAt" type="text" value="900px" /></label><label class="playground-field" for="playground-navbar-mobilePanel"><span><strong>mobile Panel</strong><small>string</small></span><input id="playground-navbar-mobilePanel" name="pg_mobilePanel" type="text" value="content" /></label><label class="playground-field" for="playground-navbar-mobileUtilitiesPosition"><span><strong>mobile Utilities Position</strong><small>string</small></span><input id="playground-navbar-mobileUtilitiesPosition" name="pg_mobileUtilitiesPosition" type="text" value="header" /></label><label class="playground-field" for="playground-navbar-gutter"><span><strong>gutter</strong><small>string</small></span><input id="playground-navbar-gutter" name="pg_gutter" type="text" value="md" /></label><label class="playground-field" for="playground-navbar-contentGutter"><span><strong>content Gutter</strong><small>string</small></span><input id="playground-navbar-contentGutter" name="pg_contentGutter" type="text" value="md" /></label><label class="playground-toggle" for="playground-navbar-flushMobile"><span><strong>flush Mobile</strong><small>boolean</small></span><input id="playground-navbar-flushMobile" name="pg_flushMobile" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-translationPrefix"><span><strong>translation Prefix</strong><small>string</small></span><input id="playground-navbar-translationPrefix" name="pg_translationPrefix" type="text" value="" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -609,56 +630,68 @@ page NavbarDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="navbar-demo-1" class="demo-canvas demo-canvas--1"> <div id="navbar-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" floating="false" openOnHover="false" mobileLabel="Navbar" flushMobile="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Brand, links and actions usage"> <section class="demo-code" aria-label="Brand, links and actions usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Navbar <pre><code>page NavbarExample <span>&#123;</span>
topbarLabel="Navbar" state items = [
brand='<span>&#123;</span> <span>&#123;</span>
"label": "Northwind", "label": "Overview",
"description": "Console", "href": "/",
"href": "/" "value": "overview"
<span>&#125;</span>' <span>&#125;</span>,
items='[ <span>&#123;</span>
<span>&#123;</span> "label": "Projects",
"label": "Overview", "href": "/projects",
"href": "/", "value": "projects"
"value": "overview" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Reports",
"label": "Projects", "href": "/reports",
"href": "/projects", "value": "reports"
"value": "projects" <span>&#125;</span>
<span>&#125;</span>, ]
<span>&#123;</span> state actions = [
"label": "Reports", <span>&#123;</span>
"href": "/reports", "label": "Sign in",
"value": "reports" "href": "/login",
<span>&#125;</span> "variant": "link"
]' <span>&#125;</span>,
actions='[ <span>&#123;</span>
<span>&#123;</span> "label": "Start free",
"label": "Sign in", "href": "/signup",
"href": "/login", "variant": "primary"
"variant": "link" <span>&#125;</span>
<span>&#125;</span>, ]
<span>&#123;</span> view <span>&#123;</span>
"label": "Start free", &lt;Navbar
"href": "/signup", topbarLabel="Navbar"
"variant": "primary" brand='<span>&#123;</span>
<span>&#125;</span> "label": "Northwind",
]' "description": "Console",
active="projects" "href": "/"
mobileLabel="Navbar"&gt; <span>&#125;</span>'
&lt;div data-slot="topbar"&gt; items="<span>&#123;</span>items<span>&#125;</span>"
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt; actions="<span>&#123;</span>actions<span>&#125;</span>"
&lt;/div&gt; active="projects"
&lt;div data-slot="actions"&gt; mobileLabel="Navbar"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt; &lt;div data-slot="topbar"&gt;
&lt;/div&gt; &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/Navbar&gt;</code></pre> &lt;/div&gt;
&lt;div data-slot="brand"&gt;
&lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="utilities"&gt;
&lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -670,88 +703,100 @@ page NavbarDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="navbar-demo-2" class="demo-canvas demo-canvas--2"> <div id="navbar-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" openOnHover="false" mobileLabel="Compact example" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" floating="false" openOnHover="false" mobileLabel="Compact example" flushMobile="false" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Dropdown and mega panel usage"> <section class="demo-code" aria-label="Dropdown and mega panel usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Navbar <pre><code>page NavbarExample <span>&#123;</span>
size="sm" state items = [
label="Compact example" <span>&#123;</span>
topbarLabel="Compact example" "label": "Overview",
brand='<span>&#123;</span> "href": "/",
"label": "Northwind", "value": "overview"
"icon": "icon-[lucide--box]", <span>&#125;</span>,
"href": "/" <span>&#123;</span>
<span>&#125;</span>' "label": "Products",
items='[ "value": "products",
<span>&#123;</span> "columns": 2,
"label": "Overview", "description": "Everything in the platform.",
"href": "/", "children": [
"value": "overview" <span>&#123;</span>
<span>&#125;</span>, "label": "Platform",
<span>&#123;</span> "children": [
"label": "Products", <span>&#123;</span>
"value": "products", "label": "Runtime",
"columns": 2, "href": "/runtime",
"description": "Everything in the platform.", "description": "The browser half.",
"children": [ "icon": "icon-[lucide--cpu]"
<span>&#123;</span> <span>&#125;</span>,
"label": "Platform", <span>&#123;</span>
"children": [ "label": "Compiler",
<span>&#123;</span> "href": "/compiler",
"label": "Runtime", "description": "WRN to JavaScript.",
"href": "/runtime", "icon": "icon-[lucide--hammer]"
"description": "The browser half.", <span>&#125;</span>
"icon": "icon-[lucide--cpu]" ]
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Compiler", "label": "Tooling",
"href": "/compiler", "children": [
"description": "WRN to JavaScript.", <span>&#123;</span>
"icon": "icon-[lucide--hammer]" "label": "CLI",
<span>&#125;</span> "href": "/cli",
] "description": "Scaffold and deploy."
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Tooling", "label": "Editor",
"children": [ "href": "/editor",
<span>&#123;</span> "description": "Language server."
"label": "CLI", <span>&#125;</span>
"href": "/cli", ]
"description": "Scaffold and deploy." <span>&#125;</span>
<span>&#125;</span>, ]
<span>&#123;</span> <span>&#125;</span>,
"label": "Editor", <span>&#123;</span>
"href": "/editor", "label": "Pricing",
"description": "Language server." "href": "/pricing",
<span>&#125;</span> "value": "pricing"
] <span>&#125;</span>
<span>&#125;</span> ]
] state actions = [
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Book a demo",
"label": "Pricing", "href": "/demo",
"href": "/pricing", "variant": "primary"
"value": "pricing" <span>&#125;</span>
<span>&#125;</span> ]
]' view <span>&#123;</span>
actions='[ &lt;Navbar
<span>&#123;</span> size="sm"
"label": "Book a demo", label="Compact example"
"href": "/demo", topbarLabel="Compact example"
"variant": "primary" brand='<span>&#123;</span>
<span>&#125;</span> "label": "Northwind",
]' "icon": "icon-[lucide--box]",
active="overview" "href": "/"
mobileLabel="Compact example"&gt; <span>&#125;</span>'
&lt;div data-slot="topbar"&gt; items="<span>&#123;</span>items<span>&#125;</span>"
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt; actions="<span>&#123;</span>actions<span>&#125;</span>"
&lt;/div&gt; active="overview"
&lt;div data-slot="actions"&gt; mobileLabel="Compact example"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt; &lt;div data-slot="topbar"&gt;
&lt;/div&gt; &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/Navbar&gt;</code></pre> &lt;/div&gt;
&lt;div data-slot="brand"&gt;
&lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="utilities"&gt;
&lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -763,47 +808,59 @@ page NavbarDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="navbar-demo-3" class="demo-canvas demo-canvas--3"> <div id="navbar-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" openOnHover="false" mobileLabel="Toggle navigation" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" floating="false" openOnHover="false" mobileLabel="Toggle navigation" flushMobile="false" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Sticky and compact usage"> <section class="demo-code" aria-label="Sticky and compact usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Navbar <pre><code>page NavbarExample <span>&#123;</span>
size="sm" state items = [
label="Advanced example" <span>&#123;</span>
topbarLabel="Advanced example" "label": "Docs",
brand='<span>&#123;</span> "href": "/docs",
"label": "Acme", "value": "docs"
"href": "/" <span>&#125;</span>,
<span>&#125;</span>' <span>&#123;</span>
items='[ "label": "Support",
<span>&#123;</span> "href": "/support",
"label": "Docs", "value": "support"
"href": "/docs", <span>&#125;</span>
"value": "docs" ]
<span>&#125;</span>, state actions = [
<span>&#123;</span> <span>&#123;</span>
"label": "Support", "label": "Dashboard",
"href": "/support", "href": "/app",
"value": "support" "variant": "primary"
<span>&#125;</span> <span>&#125;</span>
]' ]
actions='[ view <span>&#123;</span>
<span>&#123;</span> &lt;Navbar
"label": "Dashboard", size="sm"
"href": "/app", label="Advanced example"
"variant": "primary" topbarLabel="Advanced example"
<span>&#125;</span> brand='<span>&#123;</span>
]' "label": "Acme",
active="docs" "href": "/"
sticky="true"&gt; <span>&#125;</span>'
&lt;div data-slot="topbar"&gt; items="<span>&#123;</span>items<span>&#125;</span>"
&lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt; actions="<span>&#123;</span>actions<span>&#125;</span>"
&lt;/div&gt; active="docs"
&lt;div data-slot="actions"&gt; sticky="true"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt; &lt;div data-slot="topbar"&gt;
&lt;/div&gt; &lt;div class="showcase-slot"&gt;topbar slot&lt;/div&gt;
&lt;/Navbar&gt;</code></pre> &lt;/div&gt;
&lt;div data-slot="brand"&gt;
&lt;div class="showcase-slot"&gt;brand slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="utilities"&gt;
&lt;div class="showcase-slot"&gt;utilities slot&lt;/div&gt;
&lt;/div&gt;
&lt;/Navbar&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -836,7 +893,7 @@ if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>
if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "action", (payload) =&gt; <span>&#123;</span>
console.log("action", payload) console.log("action", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Primary navigation"</code></td><td>No</td></tr><tr><td><code>topbarLabel</code></td><td>string</td><td><code>"Utility navigation"</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>Record&lt;string, unknown&gt;</td><td><code><span>&#123;</span><span>&#125;</span></code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>openOnHover</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Toggle navigation"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Primary navigation"</code></td><td>No</td></tr><tr><td><code>topbarLabel</code></td><td>string</td><td><code>"Utility navigation"</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>Record&lt;string, unknown&gt;</td><td><code><span>&#123;</span><span>&#125;</span></code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>actions</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>floating</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>startFloating</code></td><td>string</td><td><code>"0px"</code></td><td>No</td></tr><tr><td><code>openOnHover</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Toggle navigation"</code></td><td>No</td></tr><tr><td><code>collapseAt</code></td><td>string</td><td><code>"900px"</code></td><td>No</td></tr><tr><td><code>mobilePanel</code></td><td>string</td><td><code>"content"</code></td><td>No</td></tr><tr><td><code>mobileUtilitiesPosition</code></td><td>string</td><td><code>"header"</code></td><td>No</td></tr><tr><td><code>gutter</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>contentGutter</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>flushMobile</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>translationPrefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#navbar-demo-1">Brand, links and actions</a><a href="#navbar-demo-2">Dropdown and mega panel</a><a href="#navbar-demo-3">Sticky and compact</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#navbar-demo-1">Brand, links and actions</a><a href="#navbar-demo-2">Dropdown and mega panel</a><a href="#navbar-demo-3">Sticky and compact</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/page-header.wrn
-564
View File
@@ -1,564 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page PageHeaderDetail {
layout = "showcase"
state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Page Header example"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default page header for a modern application."
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_id = ctx.url.searchParams.get("pg_id") ?? "page-title"
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
state playground_centered = (ctx.url.searchParams.get("pg_centered") ?? "false") === "true"
state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
state playground_showBreadcrumbs = (ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true") === "true"
state playground_breadcrumbs = JSON.parse(ctx.url.searchParams.get("pg_breadcrumbs") ?? "[{\"label\":\"Home\",\"href\":\"/\",\"icon\":\"icon-[lucide--house]\"},{\"label\":\"Components\",\"href\":\"/base\"},{\"label\":\"Page header\",\"current\":true}]")
state playground_breadcrumbParent = ctx.url.searchParams.get("pg_breadcrumbParent") ?? ""
state playground_breadcrumbParentHref = ctx.url.searchParams.get("pg_breadcrumbParentHref") ?? "#page-header-demo"
state playground_breadcrumbCurrent = ctx.url.searchParams.get("pg_breadcrumbCurrent") ?? ""
state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "Page Header"
state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#page-header-demo"
state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? ""
state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "Page Header"
state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#page-header-demo"
state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? ""
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_borderBottom = (ctx.url.searchParams.get("pg_borderBottom") ?? "true") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Page Header"
description = "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Page Header</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Marketing component</span>
<h1>Page Header</h1>
<p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p>
<div class="detail-badges"><span>25 props</span><span>3 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="PageHeader" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Page Header</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><PageHeader eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' id='{playground_id}' align='{playground_align}' centered='{playground_centered}' compact='{playground_compact}' size='{playground_size}' maxWidth='{playground_maxWidth}' showBreadcrumbs='{playground_showBreadcrumbs}' breadcrumbs='{playground_breadcrumbs}' breadcrumbParent='{playground_breadcrumbParent}' breadcrumbParentHref='{playground_breadcrumbParentHref}' breadcrumbCurrent='{playground_breadcrumbCurrent}' primaryLabel='{playground_primaryLabel}' primaryHref='{playground_primaryHref}' primaryIcon='{playground_primaryIcon}' secondaryLabel='{playground_secondaryLabel}' secondaryHref='{playground_secondaryHref}' secondaryIcon='{playground_secondaryIcon}' color='{playground_color}' variant='{playground_variant}' borderBottom='{playground_borderBottom}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;PageHeader
title="Page Header example"
description="A polished default page header for a modern application."
align="start"
showBreadcrumbs="true"
breadcrumbs='[
<span>&#123;</span>
"id": "page-header-0-1",
"key": "page-header-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": "#page-header-demo",
"actionHref": "#page-header-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "page-header-0-2",
"key": "page-header-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#page-header-demo",
"actionHref": "#page-header-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
breadcrumbParentHref="#page-header-demo"
primaryLabel="Page Header"
primaryHref="#page-header-demo"
secondaryLabel="Page Header"
secondaryHref="#page-header-demo"&gt;
&lt;div data-slot="meta"&gt;
&lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/PageHeader&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-page-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-page-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-page-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-page-header-title" name="pg_title" type="text" value="Page Header example" /></label><label class="playground-field" for="playground-page-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-page-header-description" name="pg_description" type="text" value="A polished default page header for a modern application." /></label><label class="playground-field" for="playground-page-header-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-page-header-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-page-header-id" name="pg_id" type="text" value="page-title" /></label><label class="playground-field" for="playground-page-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-page-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-toggle" for="playground-page-header-centered"><span><strong>centered</strong><small>boolean</small></span><input id="playground-page-header-centered" name="pg_centered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-page-header-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-page-header-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-page-header-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-page-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-page-header-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="xl">xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-page-header-showBreadcrumbs"><span><strong>show Breadcrumbs</strong><small>boolean</small></span><input id="playground-page-header-showBreadcrumbs" name="pg_showBreadcrumbs" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-breadcrumbs"><span><strong>breadcrumbs</strong><small>unknown[]</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
&#123;
"label": "Home",
"href": "/",
"icon": "icon-[lucide--house]"
&#125;,
&#123;
"label": "Components",
"href": "/base"
&#125;,
&#123;
"label": "Page header",
"current": true
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-page-header-breadcrumbParent"><span><strong>breadcrumb Parent</strong><small>string</small></span><input id="playground-page-header-breadcrumbParent" name="pg_breadcrumbParent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-breadcrumbParentHref"><span><strong>breadcrumb Parent Href</strong><small>string</small></span><input id="playground-page-header-breadcrumbParentHref" name="pg_breadcrumbParentHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-breadcrumbCurrent"><span><strong>breadcrumb Current</strong><small>string</small></span><input id="playground-page-header-breadcrumbCurrent" name="pg_breadcrumbCurrent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-page-header-primaryLabel" name="pg_primaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-page-header-primaryHref" name="pg_primaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-page-header-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-page-header-secondaryLabel" name="pg_secondaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-page-header-secondaryHref" name="pg_secondaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-page-header-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-page-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-page-header-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-page-header-variant" name="pg_variant"><option value="default" selected>default</option><option value="minimal">minimal</option><option value="soft">soft</option><option value="raised">raised</option><option value="tinted">tinted</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-page-header-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-page-header-borderBottom" name="pg_borderBottom" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-page-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Page header with actions</h2><p>Introduce a service or documentation page with breadcrumbs and clear actions.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="page-header-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><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" /></div>
</div>
<section class="demo-code" aria-label="Page header with actions usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;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"
maxWidth="full"
showBreadcrumbs="true"
breadcrumbs='[
<span>&#123;</span>
"label": "Home",
"href": "/",
"icon": "icon-[lucide--house]"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Components",
"href": "/base"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Page header",
"current": true
<span>&#125;</span>
]'
breadcrumbParentHref="#page-header-demo"
primaryLabel="Primary action"
primaryHref="#primary"
primaryIcon="icon-[lucide--arrow-down]"
secondaryLabel="Secondary action"
secondaryHref="#secondary"
secondaryIcon="icon-[lucide--house]"&gt;
&lt;div data-slot="meta"&gt;
&lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/PageHeader&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Compact service header</h2><p>Use reduced spacing when a page already sits inside an application shell.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="page-header-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PageHeader eyebrow="Citizen service" title="Track a complaint" description="Check the latest status using your complaint reference." icon="icon-[lucide--scan-search]" align="center" centered="false" compact="true" size="sm" showBreadcrumbs="true" breadcrumbs='[{"id":"page-header-1-1","key":"page-header-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":"#page-header-demo","actionHref":"#page-header-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":"page-header-1-2","key":"page-header-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#page-header-demo","actionHref":"#page-header-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"]}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Track status" primaryHref="#track" secondaryLabel="Compact example" secondaryHref="#page-header-demo" variant="soft" borderBottom="true" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact service header usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;PageHeader
eyebrow="Citizen service"
title="Track a complaint"
description="Check the latest status using your complaint reference."
icon="icon-[lucide--scan-search]"
align="center"
compact="true"
size="sm"
showBreadcrumbs="true"
breadcrumbs='[
<span>&#123;</span>
"id": "page-header-1-1",
"key": "page-header-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": "#page-header-demo",
"actionHref": "#page-header-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "page-header-1-2",
"key": "page-header-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#page-header-demo",
"actionHref": "#page-header-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
breadcrumbParentHref="#page-header-demo"
primaryLabel="Track status"
primaryHref="#track"
secondaryLabel="Compact example"
secondaryHref="#page-header-demo"
variant="soft"&gt;
&lt;div data-slot="meta"&gt;
&lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/PageHeader&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Centered campaign header</h2><p>Use a centered header for campaigns, guides, and high-level public information.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="page-header-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PageHeader eyebrow="Safety guide" title="Prepare your family for emergencies" description="Practical guidance for creating a plan, preparing supplies, and staying informed." icon="icon-[lucide--trash-2]" align="center" centered="true" compact="false" size="lg" maxWidth="wide" showBreadcrumbs="true" breadcrumbs='[{"id":"page-header-2-1","key":"page-header-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":"#page-header-demo","actionHref":"#page-header-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":"page-header-2-2","key":"page-header-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":"#page-header-demo","actionHref":"#page-header-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"]}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Advanced example" primaryHref="#page-header-demo" secondaryLabel="Advanced example" secondaryHref="#page-header-demo" variant="minimal" borderBottom="true" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Centered campaign header usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;PageHeader
eyebrow="Safety guide"
title="Prepare your family for emergencies"
description="Practical guidance for creating a plan, preparing supplies, and staying informed."
icon="icon-[lucide--trash-2]"
align="center"
centered="true"
size="lg"
maxWidth="wide"
showBreadcrumbs="true"
breadcrumbs='[
<span>&#123;</span>
"id": "page-header-2-1",
"key": "page-header-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": "#page-header-demo",
"actionHref": "#page-header-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "page-header-2-2",
"key": "page-header-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": "#page-header-demo",
"actionHref": "#page-header-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
breadcrumbParentHref="#page-header-demo"
primaryLabel="Advanced example"
primaryHref="#page-header-demo"
secondaryLabel="Advanced example"
secondaryHref="#page-header-demo"
variant="minimal"&gt;
&lt;div data-slot="meta"&gt;
&lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="actions"&gt;
&lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
&lt;/div&gt;
&lt;/PageHeader&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>"page-title"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>showBreadcrumbs</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>breadcrumbs</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>breadcrumbParent</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>breadcrumbParentHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>breadcrumbCurrent</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>borderBottom</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#page-header-demo-1">Page header with actions</a><a href="#page-header-demo-2">Compact service header</a><a href="#page-header-demo-3">Centered campaign header</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/marketing-section-header"><small>Previous</small><strong>← Marketing Section Header</strong></a>
<a href="/components/split-hero"><small>Next</small><strong>Split Hero →</strong></a>
</nav>
}
}
app/pages/components/pagination.wrn
+20 -37
View File
@@ -3,16 +3,17 @@ page PaginationDetail {
layout = "showcase" layout = "showcase"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "3") state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1")
state playground_pageSize = Number(ctx.url.searchParams.get("pg_pageSize") ?? "3") state playground_pageSize = Number(ctx.url.searchParams.get("pg_pageSize") ?? "10")
state playground_total = Number(ctx.url.searchParams.get("pg_total") ?? "3") state playground_total = Number(ctx.url.searchParams.get("pg_total") ?? "0")
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "compact" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "compact"
state playground_siblingCount = Number(ctx.url.searchParams.get("pg_siblingCount") ?? "3") state playground_siblingCount = Number(ctx.url.searchParams.get("pg_siblingCount") ?? "1")
state playground_showSummary = (ctx.url.searchParams.get("pg_showSummary") ?? "true") === "true" state playground_showSummary = (ctx.url.searchParams.get("pg_showSummary") ?? "true") === "true"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Pagination" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Pagination"
state playground_previousLabel = ctx.url.searchParams.get("pg_previousLabel") ?? "Pagination" state playground_previousLabel = ctx.url.searchParams.get("pg_previousLabel") ?? "Previous"
state playground_nextLabel = ctx.url.searchParams.get("pg_nextLabel") ?? "Pagination" state playground_nextLabel = ctx.url.searchParams.get("pg_nextLabel") ?? "Next"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_hrefTemplate = ctx.url.searchParams.get("pg_hrefTemplate") ?? ""
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Pagination" title = "Pagination"
description = "Theme-aware, responsive pagination component." description = "Theme-aware, responsive pagination component."
@@ -26,7 +27,7 @@ page PaginationDetail {
<span class="showcase-eyebrow">Navigation component</span> <span class="showcase-eyebrow">Navigation component</span>
<h1>Pagination</h1> <h1>Pagination</h1>
<p>Theme-aware, responsive pagination component.</p> <p>Theme-aware, responsive pagination component.</p>
<div class="detail-badges"><span>12 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>13 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -35,24 +36,17 @@ page PaginationDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Pagination color='{playground_color}' size='{playground_size}' page='{playground_page}' pageSize='{playground_pageSize}' total='{playground_total}' variant='{playground_variant}' siblingCount='{playground_siblingCount}' showSummary='{playground_showSummary}' label='{playground_label}' previousLabel='{playground_previousLabel}' nextLabel='{playground_nextLabel}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Pagination color='{playground_color}' size='{playground_size}' page='{playground_page}' pageSize='{playground_pageSize}' total='{playground_total}' variant='{playground_variant}' siblingCount='{playground_siblingCount}' showSummary='{playground_showSummary}' label='{playground_label}' previousLabel='{playground_previousLabel}' nextLabel='{playground_nextLabel}' hrefTemplate='{playground_hrefTemplate}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Pagination <pre><code data-playground-code>&lt;Pagination /&gt;</code></pre>
page="3"
pageSize="3"
total="3"
siblingCount="3"
previousLabel="Pagination"
nextLabel="Pagination"
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-pagination-color"><span><strong>color</strong><small>string</small></span><select id="playground-pagination-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pagination-size"><span><strong>size</strong><small>string</small></span><select id="playground-pagination-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pagination-page"><span><strong>page</strong><small>number</small></span><input id="playground-pagination-page" name="pg_page" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-pageSize"><span><strong>page Size</strong><small>number</small></span><input id="playground-pagination-pageSize" name="pg_pageSize" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-total"><span><strong>total</strong><small>number</small></span><input id="playground-pagination-total" name="pg_total" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-pagination-variant" name="pg_variant" type="text" value="compact" /></label><label class="playground-field" for="playground-pagination-siblingCount"><span><strong>sibling Count</strong><small>number</small></span><input id="playground-pagination-siblingCount" name="pg_siblingCount" type="number" value="3" /></label><label class="playground-toggle" for="playground-pagination-showSummary"><span><strong>show Summary</strong><small>boolean</small></span><input id="playground-pagination-showSummary" name="pg_showSummary" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-pagination-label"><span><strong>label</strong><small>string</small></span><input id="playground-pagination-label" name="pg_label" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-previousLabel"><span><strong>previous Label</strong><small>string</small></span><input id="playground-pagination-previousLabel" name="pg_previousLabel" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-nextLabel"><span><strong>next Label</strong><small>string</small></span><input id="playground-pagination-nextLabel" name="pg_nextLabel" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-class"><span><strong>class</strong><small>string</small></span><input id="playground-pagination-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-pagination-color"><span><strong>color</strong><small>string</small></span><select id="playground-pagination-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pagination-size"><span><strong>size</strong><small>string</small></span><select id="playground-pagination-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pagination-page"><span><strong>page</strong><small>number</small></span><input id="playground-pagination-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-pagination-pageSize"><span><strong>page Size</strong><small>number</small></span><input id="playground-pagination-pageSize" name="pg_pageSize" type="number" value="10" /></label><label class="playground-field" for="playground-pagination-total"><span><strong>total</strong><small>number</small></span><input id="playground-pagination-total" name="pg_total" type="number" value="0" /></label><label class="playground-field" for="playground-pagination-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-pagination-variant" name="pg_variant" type="text" value="compact" /></label><label class="playground-field" for="playground-pagination-siblingCount"><span><strong>sibling Count</strong><small>number</small></span><input id="playground-pagination-siblingCount" name="pg_siblingCount" type="number" value="1" /></label><label class="playground-toggle" for="playground-pagination-showSummary"><span><strong>show Summary</strong><small>boolean</small></span><input id="playground-pagination-showSummary" name="pg_showSummary" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-pagination-label"><span><strong>label</strong><small>string</small></span><input id="playground-pagination-label" name="pg_label" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-previousLabel"><span><strong>previous Label</strong><small>string</small></span><input id="playground-pagination-previousLabel" name="pg_previousLabel" type="text" value="Previous" /></label><label class="playground-field" for="playground-pagination-nextLabel"><span><strong>next Label</strong><small>string</small></span><input id="playground-pagination-nextLabel" name="pg_nextLabel" type="text" value="Next" /></label><label class="playground-field" for="playground-pagination-hrefTemplate"><span><strong>href Template</strong><small>string</small></span><input id="playground-pagination-hrefTemplate" name="pg_hrefTemplate" type="text" value="" /></label><label class="playground-field" for="playground-pagination-class"><span><strong>class</strong><small>string</small></span><input id="playground-pagination-class" name="pg_class" type="text" value="" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -67,17 +61,14 @@ page PaginationDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pagination-demo-1" class="demo-canvas demo-canvas--1"> <div id="pagination-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Pagination size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="3" showSummary="true" label="Pagination" previousLabel="Pagination" nextLabel="Pagination" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Pagination color="primary" size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact arrows usage"> <section class="demo-code" aria-label="Compact arrows usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Pagination <pre><code>&lt;Pagination
page="2" page="2"
total="137" total="137"
siblingCount="3"
previousLabel="Pagination"
nextLabel="Pagination"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -90,19 +81,15 @@ page PaginationDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pagination-demo-2" class="demo-canvas demo-canvas--2"> <div id="pagination-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Pagination size="sm" page="5" pageSize="10" total="200" variant="numbered" siblingCount="1" showSummary="true" label="Compact example" previousLabel="Compact example" nextLabel="Compact example" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Pagination color="primary" size="default" page="5" pageSize="10" total="200" variant="numbered" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Numbered pages usage"> <section class="demo-code" aria-label="Numbered pages usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Pagination <pre><code>&lt;Pagination
size="sm"
page="5" page="5"
total="200" total="200"
variant="numbered" variant="numbered"
label="Compact example"
previousLabel="Compact example"
nextLabel="Compact example"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -115,21 +102,17 @@ page PaginationDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pagination-demo-3" class="demo-canvas demo-canvas--3"> <div id="pagination-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Pagination size="lg" page="8" pageSize="25" total="900" variant="numbered" siblingCount="2" showSummary="true" label="Advanced example" previousLabel="Advanced example" nextLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Pagination color="primary" size="default" page="8" pageSize="25" total="900" variant="numbered" siblingCount="2" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Wider window usage"> <section class="demo-code" aria-label="Wider window usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Pagination <pre><code>&lt;Pagination
size="lg"
page="8" page="8"
pageSize="25" pageSize="25"
total="900" total="900"
variant="numbered" variant="numbered"
siblingCount="2" siblingCount="2"
label="Advanced example"
previousLabel="Advanced example"
nextLabel="Advanced example"
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
</div> </div>
@@ -153,7 +136,7 @@ if (component) registerOutputHandler(component, "previous", (payload) =&gt; <spa
if (component) registerOutputHandler(component, "next", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "next", (payload) =&gt; <span>&#123;</span>
console.log("next", payload) console.log("next", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>pageSize</code></td><td>number</td><td><code>10</code></td><td>No</td></tr><tr><td><code>total</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>siblingCount</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showSummary</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>previousLabel</code></td><td>string</td><td><code>"Previous"</code></td><td>No</td></tr><tr><td><code>nextLabel</code></td><td>string</td><td><code>"Next"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>pageSize</code></td><td>number</td><td><code>10</code></td><td>No</td></tr><tr><td><code>total</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>siblingCount</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showSummary</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>previousLabel</code></td><td>string</td><td><code>"Previous"</code></td><td>No</td></tr><tr><td><code>nextLabel</code></td><td>string</td><td><code>"Next"</code></td><td>No</td></tr><tr><td><code>hrefTemplate</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#pagination-demo-1">Compact arrows</a><a href="#pagination-demo-2">Numbered pages</a><a href="#pagination-demo-3">Wider window</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#pagination-demo-1">Compact arrows</a><a href="#pagination-demo-2">Numbered pages</a><a href="#pagination-demo-3">Wider window</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/pin-input.wrn
+17 -17
View File
@@ -77,7 +77,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-1" class="demo-canvas demo-canvas--1"> <div id="pin-input-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Default four-digit PIN usage"> <section class="demo-code" aria-label="Default four-digit PIN usage">
@@ -97,7 +97,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-2" class="demo-canvas demo-canvas--2"> <div id="pin-input-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><div class="pin-length-demo"><PinInput size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div></div> <div class="demo-render"><div class="pin-length-demo"><PinInput size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div></div>
</div> </div>
<section class="demo-code" aria-label="Different lengths usage"> <section class="demo-code" aria-label="Different lengths usage">
@@ -130,7 +130,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-3" class="demo-canvas demo-canvas--3"> <div id="pin-input-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Pre-filled verification code usage"> <section class="demo-code" aria-label="Pre-filled verification code usage">
@@ -152,7 +152,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-4" class="demo-canvas demo-canvas--4"> <div id="pin-input-demo-4" class="demo-canvas demo-canvas--4">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Masked security PIN usage"> <section class="demo-code" aria-label="Masked security PIN usage">
@@ -173,7 +173,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-5" class="demo-canvas demo-canvas--5"> <div id="pin-input-demo-5" class="demo-canvas demo-canvas--5">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Alphanumeric regex usage"> <section class="demo-code" aria-label="Alphanumeric regex usage">
@@ -196,7 +196,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-6" class="demo-canvas demo-canvas--6"> <div id="pin-input-demo-6" class="demo-canvas demo-canvas--6">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Grouped code with separator usage"> <section class="demo-code" aria-label="Grouped code with separator usage">
@@ -219,7 +219,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-7" class="demo-canvas demo-canvas--7"> <div id="pin-input-demo-7" class="demo-canvas demo-canvas--7">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Paste from clipboard usage"> <section class="demo-code" aria-label="Paste from clipboard usage">
@@ -240,7 +240,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-8" class="demo-canvas demo-canvas--8"> <div id="pin-input-demo-8" class="demo-canvas demo-canvas--8">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Disabled PIN input usage"> <section class="demo-code" aria-label="Disabled PIN input usage">
@@ -262,7 +262,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-9" class="demo-canvas demo-canvas--9"> <div id="pin-input-demo-9" class="demo-canvas demo-canvas--9">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Read-only code usage"> <section class="demo-code" aria-label="Read-only code usage">
@@ -285,8 +285,8 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-10" class="demo-canvas demo-canvas--10"> <div id="pin-input-demo-10" class="demo-canvas demo-canvas--10">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><PinInput size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div> <div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><PinInput size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
</div> </div>
<section class="demo-code" aria-label="Validation state usage"> <section class="demo-code" aria-label="Validation state usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -307,7 +307,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-11" class="demo-canvas demo-canvas--11"> <div id="pin-input-demo-11" class="demo-canvas demo-canvas--11">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Supporting help text usage"> <section class="demo-code" aria-label="Supporting help text usage">
@@ -329,7 +329,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-12" class="demo-canvas demo-canvas--12"> <div id="pin-input-demo-12" class="demo-canvas demo-canvas--12">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Large PIN cells usage"> <section class="demo-code" aria-label="Large PIN cells usage">
@@ -351,7 +351,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-13" class="demo-canvas demo-canvas--13"> <div id="pin-input-demo-13" class="demo-canvas demo-canvas--13">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Custom placeholder usage"> <section class="demo-code" aria-label="Custom placeholder usage">
@@ -373,7 +373,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-14" class="demo-canvas demo-canvas--14"> <div id="pin-input-demo-14" class="demo-canvas demo-canvas--14">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Automatic form submission usage"> <section class="demo-code" aria-label="Automatic form submission usage">
@@ -395,7 +395,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-15" class="demo-canvas demo-canvas--15"> <div id="pin-input-demo-15" class="demo-canvas demo-canvas--15">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="Completion events usage"> <section class="demo-code" aria-label="Completion events usage">
@@ -416,7 +416,7 @@ page PinInputDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="pin-input-demo-16" class="demo-canvas demo-canvas--16"> <div id="pin-input-demo-16" class="demo-canvas demo-canvas--16">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PinInput size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div> <div class="demo-render"><PinInput size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
</div> </div>
<section class="demo-code" aria-label="JavaScript methods usage"> <section class="demo-code" aria-label="JavaScript methods usage">
app/pages/components/portal-dashboard.wrn
-2319
View File
File diff suppressed because it is too large. Load diff
app/pages/components/preference-switcher.wrn
+21 -14
View File
@@ -6,9 +6,16 @@ page PreferenceSwitcherDetail {
state playground_themeLabel = ctx.url.searchParams.get("pg_themeLabel") ?? "Preference Switcher" state playground_themeLabel = ctx.url.searchParams.get("pg_themeLabel") ?? "Preference Switcher"
state playground_colorLabel = ctx.url.searchParams.get("pg_colorLabel") ?? "Preference Switcher" state playground_colorLabel = ctx.url.searchParams.get("pg_colorLabel") ?? "Preference Switcher"
state playground_languageLabel = ctx.url.searchParams.get("pg_languageLabel") ?? "Preference Switcher" state playground_languageLabel = ctx.url.searchParams.get("pg_languageLabel") ?? "Preference Switcher"
state playground_languages = ctx.url.searchParams.get("pg_languages") ?? "" state playground_languages = JSON.parse(ctx.url.searchParams.get("pg_languages") ?? "[]")
state playground_colors = ctx.url.searchParams.get("pg_colors") ?? "" state playground_colors = JSON.parse(ctx.url.searchParams.get("pg_colors") ?? "[]")
state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true" state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
state playground_iconOnly = (ctx.url.searchParams.get("pg_iconOnly") ?? "true") === "true"
state playground_themeIcon = ctx.url.searchParams.get("pg_themeIcon") ?? "icon-[lucide--sun-moon]"
state playground_colorIcon = ctx.url.searchParams.get("pg_colorIcon") ?? "icon-[lucide--palette]"
state playground_languageIcon = ctx.url.searchParams.get("pg_languageIcon") ?? "icon-[lucide--languages]"
state playground_panelPlacement = ctx.url.searchParams.get("pg_panelPlacement") ?? "bottom-end"
state playground_mobilePanel = ctx.url.searchParams.get("pg_mobilePanel") ?? "dropdown"
state playground_showCurrentLanguage = (ctx.url.searchParams.get("pg_showCurrentLanguage") ?? "true") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo { seo {
title = "Preference Switcher" title = "Preference Switcher"
@@ -23,7 +30,7 @@ page PreferenceSwitcherDetail {
<span class="showcase-eyebrow">Core component</span> <span class="showcase-eyebrow">Core component</span>
<h1>Preference Switcher</h1> <h1>Preference Switcher</h1>
<p>Reusable preference switcher component.</p> <p>Reusable preference switcher component.</p>
<div class="detail-badges"><span>9 props</span><span>0 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>16 props</span><span>0 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -32,7 +39,7 @@ page PreferenceSwitcherDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><PreferenceSwitcher size='{playground_size}' color='{playground_color}' themeLabel='{playground_themeLabel}' colorLabel='{playground_colorLabel}' languageLabel='{playground_languageLabel}' languages='{playground_languages}' colors='{playground_colors}' compact='{playground_compact}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><PreferenceSwitcher size='{playground_size}' color='{playground_color}' themeLabel='{playground_themeLabel}' colorLabel='{playground_colorLabel}' languageLabel='{playground_languageLabel}' languages='{playground_languages}' colors='{playground_colors}' compact='{playground_compact}' iconOnly='{playground_iconOnly}' themeIcon='{playground_themeIcon}' colorIcon='{playground_colorIcon}' languageIcon='{playground_languageIcon}' panelPlacement='{playground_panelPlacement}' mobilePanel='{playground_mobilePanel}' showCurrentLanguage='{playground_showCurrentLanguage}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;PreferenceSwitcher <pre><code data-playground-code>&lt;PreferenceSwitcher
@@ -46,8 +53,8 @@ page PreferenceSwitcherDetail {
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>16 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-preference-switcher-size"><span><strong>size</strong><small>string</small></span><select id="playground-preference-switcher-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-preference-switcher-color"><span><strong>color</strong><small>string</small></span><select id="playground-preference-switcher-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-preference-switcher-themeLabel"><span><strong>theme Label</strong><small>string</small></span><input id="playground-preference-switcher-themeLabel" name="pg_themeLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-colorLabel"><span><strong>color Label</strong><small>string</small></span><input id="playground-preference-switcher-colorLabel" name="pg_colorLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-languageLabel"><span><strong>language Label</strong><small>string</small></span><input id="playground-preference-switcher-languageLabel" name="pg_languageLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-languages"><span><strong>languages</strong><small>string</small></span><input id="playground-preference-switcher-languages" name="pg_languages" type="text" value="" /></label><label class="playground-field" for="playground-preference-switcher-colors"><span><strong>colors</strong><small>string</small></span><input id="playground-preference-switcher-colors" name="pg_colors" type="text" value="" /></label><label class="playground-toggle" for="playground-preference-switcher-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-preference-switcher-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-preference-switcher-class"><span><strong>class</strong><small>string</small></span><input id="playground-preference-switcher-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> <div class="playground-fields"><label class="playground-field" for="playground-preference-switcher-size"><span><strong>size</strong><small>string</small></span><select id="playground-preference-switcher-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-preference-switcher-color"><span><strong>color</strong><small>string</small></span><select id="playground-preference-switcher-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-preference-switcher-themeLabel"><span><strong>theme Label</strong><small>string</small></span><input id="playground-preference-switcher-themeLabel" name="pg_themeLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-colorLabel"><span><strong>color Label</strong><small>string</small></span><input id="playground-preference-switcher-colorLabel" name="pg_colorLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-languageLabel"><span><strong>language Label</strong><small>string</small></span><input id="playground-preference-switcher-languageLabel" name="pg_languageLabel" type="text" value="Preference Switcher" /></label><label class="playground-field" for="playground-preference-switcher-languages"><span><strong>languages</strong><small>string</small></span><textarea id="playground-preference-switcher-languages" name="pg_languages" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-preference-switcher-colors"><span><strong>colors</strong><small>string</small></span><textarea id="playground-preference-switcher-colors" name="pg_colors" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-preference-switcher-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-preference-switcher-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-preference-switcher-iconOnly"><span><strong>icon Only</strong><small>boolean</small></span><input id="playground-preference-switcher-iconOnly" name="pg_iconOnly" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-preference-switcher-themeIcon"><span><strong>theme Icon</strong><small>string</small></span><input id="playground-preference-switcher-themeIcon" name="pg_themeIcon" type="text" value="icon-[lucide--sun-moon]" /></label><label class="playground-field" for="playground-preference-switcher-colorIcon"><span><strong>color Icon</strong><small>string</small></span><input id="playground-preference-switcher-colorIcon" name="pg_colorIcon" type="text" value="icon-[lucide--palette]" /></label><label class="playground-field" for="playground-preference-switcher-languageIcon"><span><strong>language Icon</strong><small>string</small></span><input id="playground-preference-switcher-languageIcon" name="pg_languageIcon" type="text" value="icon-[lucide--languages]" /></label><label class="playground-field" for="playground-preference-switcher-panelPlacement"><span><strong>panel Placement</strong><small>string</small></span><input id="playground-preference-switcher-panelPlacement" name="pg_panelPlacement" type="text" value="bottom-end" /></label><label class="playground-field" for="playground-preference-switcher-mobilePanel"><span><strong>mobile Panel</strong><small>string</small></span><input id="playground-preference-switcher-mobilePanel" name="pg_mobilePanel" type="text" value="dropdown" /></label><label class="playground-toggle" for="playground-preference-switcher-showCurrentLanguage"><span><strong>show Current Language</strong><small>boolean</small></span><input id="playground-preference-switcher-showCurrentLanguage" name="pg_showCurrentLanguage" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-preference-switcher-class"><span><strong>class</strong><small>string</small></span><input id="playground-preference-switcher-class" name="pg_class" type="teLine truncated
</form> </form>
</div> </div>
</section> </section>
@@ -62,8 +69,8 @@ page PreferenceSwitcherDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="preference-switcher-demo-1" class="demo-canvas demo-canvas--1"> <div id="preference-switcher-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -84,8 +91,8 @@ page PreferenceSwitcherDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="preference-switcher-demo-2" class="demo-canvas demo-canvas--2"> <div id="preference-switcher-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PreferenceSwitcher size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><PreferenceSwitcher size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -106,8 +113,8 @@ page PreferenceSwitcherDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="preference-switcher-demo-3" class="demo-canvas demo-canvas--3"> <div id="preference-switcher-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PreferenceSwitcher size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><PreferenceSwitcher size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -140,14 +147,14 @@ if (component) registerOutputHandler(component, "color", (payload) =&gt; <span>&
if (component) registerOutputHandler(component, "language", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "language", (payload) =&gt; <span>&#123;</span>
console.log("language", payload) console.log("language", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>themeLabel</code></td><td>string</td><td><code>"Theme"</code></td><td>No</td></tr><tr><td><code>colorLabel</code></td><td>string</td><td><code>"Accent color"</code></td><td>No</td></tr><tr><td><code>languageLabel</code></td><td>string</td><td><code>"Language"</code></td><td>No</td></tr><tr><td><code>languages</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>colors</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>themeLabel</code></td><td>string</td><td><code>"Theme"</code></td><td>No</td></tr><tr><td><code>colorLabel</code></td><td>string</td><td><code>"Accent color"</code></td><td>No</td></tr><tr><td><code>languageLabel</code></td><td>string</td><td><code>"Language"</code></td><td>No</td></tr><tr><td><code>languages</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>colors</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>iconOnly</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>themeIcon</code></td><td>string</td><td><code>"icon-[lucide--sun-moon]"</code></td><td>No</td></tr><tr><td><code>colorIcon</code></td><td>string</td><td><code>"icon-[lucide--palette]"</code></td><td>No</td></tr><tr><td><code>languageIcon</code></td><td>string</td><td><code>"icon-[lucide--languages]"</code></td><td>No</td></tr><tr><td><code>panelPlacement</code></td><td>string</td><td><code>"bottom-end"</code></td><td>No</td></tr><tr><td><code>mobilePanel</code></td><td>string</td><td><code>"dropdown"</code></td><td>No</td></tr><tr><td><code>showCurrentLanguage</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#preference-switcher-demo-1">Production default</a><a href="#preference-switcher-demo-2">Compact application</a><a href="#preference-switcher-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#preference-switcher-demo-1">Production default</a><a href="#preference-switcher-demo-2">Compact application</a><a href="#preference-switcher-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
<a href="/components/portal-dashboard"><small>Previous</small><strong>← Portal Dashboard</strong></a> <span></span>
<a href="/components/toaster"><small>Next</small><strong>Toaster →</strong></a> <a href="/components/toaster"><small>Next</small><strong>Toaster →</strong></a>
</nav> </nav>
} }
app/pages/components/progress.wrn
+5 -5
View File
@@ -38,7 +38,7 @@ page ProgressDetail {
/&gt;</code></pre> /&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -57,7 +57,7 @@ page ProgressDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="progress-demo-1" class="demo-canvas demo-canvas--1"> <div id="progress-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Progress size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Progress size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
@@ -76,7 +76,7 @@ page ProgressDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="progress-demo-2" class="demo-canvas demo-canvas--2"> <div id="progress-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Progress size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Progress size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
@@ -97,7 +97,7 @@ page ProgressDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="progress-demo-3" class="demo-canvas demo-canvas--3"> <div id="progress-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Progress size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Progress size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
@@ -110,7 +110,7 @@ page ProgressDetail {
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
app/pages/components/public-page-shell.wrn
-190
View File
@@ -1,190 +0,0 @@
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page PublicPageShellDetail {
layout = "showcase"
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true"
state playground_headerOffset = ctx.url.searchParams.get("pg_headerOffset") ?? "none"
state playground_background = ctx.url.searchParams.get("pg_background") ?? "default"
state playground_overflow = ctx.url.searchParams.get("pg_overflow") ?? "clip"
state playground_minHeight = ctx.url.searchParams.get("pg_minHeight") ?? "screen"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo {
title = "Public Page Shell"
description = "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages."
}
view {
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Public Page Shell</span>
</nav>
<header class="detail-hero">
<div class="detail-hero-copy">
<span class="showcase-eyebrow">Layout component</span>
<h1>Public Page Shell</h1>
<p>Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.</p>
<div class="detail-badges"><span>10 props</span><span>3 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header>
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="PublicPageShell" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Public Page Shell</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
<div class="playground-workbench">
<div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><PublicPageShell maxWidth='{playground_maxWidth}' fullWidth='{playground_fullWidth}' headerOffset='{playground_headerOffset}' background='{playground_background}' overflow='{playground_overflow}' minHeight='{playground_minHeight}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}'>
<div class="showcase-shell-preview">
<header>Header slot</header>
<main>Public page content</main>
<footer>Footer slot</footer>
</div></PublicPageShell></div>
<section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;PublicPageShell
fullWidth="false"&gt;
&lt;div data-slot="before"&gt;
&lt;div class="showcase-slot"&gt;before slot&lt;/div&gt;
&lt;/div&gt;
&lt;div data-slot="after"&gt;
&lt;div class="showcase-slot"&gt;after slot&lt;/div&gt;
&lt;/div&gt;
&lt;/PublicPageShell&gt;</code></pre>
</section>
<div class="playground-status" data-playground-status aria-live="polite"></div>
</div>
<form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-public-page-shell-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-public-page-shell-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-public-page-shell-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-public-page-shell-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-public-page-shell-headerOffset"><span><strong>header Offset</strong><small>string</small></span><select id="playground-public-page-shell-headerOffset" name="pg_headerOffset"><option value="none" selected>none</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-public-page-shell-background"><span><strong>background</strong><small>string</small></span><select id="playground-public-page-shell-background" name="pg_background"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="transparent">transparent</option></select></label><label class="playground-field" for="playground-public-page-shell-overflow"><span><strong>overflow</strong><small>string</small></span><select id="playground-public-page-shell-overflow" name="pg_overflow"><option value="clip" selected>clip</option><option value="visible">visible</option><option value="hidden">hidden</option><option value="auto">auto</option></select></label><label class="playground-field" for="playground-public-page-shell-minHeight"><span><strong>min Height</strong><small>string</small></span><select id="playground-public-page-shell-minHeight" name="pg_minHeight"><option value="screen" selected>screen</option><option value="none">none</option><option value="full">full</option></select></label><label class="playground-field" for="playground-public-page-shell-size"><span><strong>size</strong><small>string</small></span><select id="playground-public-page-shell-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-public-page-shell-color"><span><strong>color</strong><small>string</small></span><select id="playground-public-page-shell-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-public-page-shell-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-public-page-shell-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-public-page-shell-class"><span><strong>class</strong><small>string</small></span><input id="playground-public-page-shell-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form>
</div>
</section>
<div class="detail-layout">
<main class="detail-content">
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Complete public page shell</h2><p>Use the shell around a complete marketing or public-service page.</p></div>
<span class="demo-case-number">01</span>
</header>
<div class="demo-workbench">
<div id="public-page-shell-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PublicPageShell maxWidth="xl" fullWidth="false" background="default" size="default" variant="default" class="showcase-instance showcase-instance--1">
<div class="showcase-shell-preview">
<header>Header slot</header>
<main>Public page content</main>
<footer>Footer slot</footer>
</div></PublicPageShell></div>
</div>
<section class="demo-code" aria-label="Complete public page shell usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;PublicPageShell
maxWidth="xl"
fullWidth="false"&gt;
&lt;div data-slot="before"&gt;
&lt;div class="showcase-slot"&gt;before slot&lt;/div&gt;
&lt;/div&gt;
&lt;div class="showcase-shell-preview"&gt;
&lt;header&gt;Header slot&lt;/header&gt;
&lt;main&gt;Public page content&lt;/main&gt;
&lt;footer&gt;Footer slot&lt;/footer&gt;
&lt;/div&gt;
&lt;div data-slot="after"&gt;
&lt;div class="showcase-slot"&gt;after slot&lt;/div&gt;
&lt;/div&gt;
&lt;/PublicPageShell&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Compact</span><h2>Constrained documentation shell</h2><p>Keep long-form documentation readable with a compact content width.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="public-page-shell-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PublicPageShell maxWidth="compact" fullWidth="false" headerOffset="sm" background="soft" size="sm" variant="secondary" class="showcase-instance showcase-instance--2">
<div class="showcase-shell-preview">
<header>Header slot</header>
<main>Public page content</main>
<footer>Footer slot</footer>
</div></PublicPageShell></div>
</div>
<section class="demo-code" aria-label="Constrained documentation shell usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;PublicPageShell
maxWidth="compact"
fullWidth="false"
headerOffset="sm"
background="soft"
size="sm"
variant="secondary"&gt;
&lt;div data-slot="before"&gt;
&lt;div class="showcase-slot"&gt;before slot&lt;/div&gt;
&lt;/div&gt;
&lt;div class="showcase-shell-preview"&gt;
&lt;header&gt;Header slot&lt;/header&gt;
&lt;main&gt;Public page content&lt;/main&gt;
&lt;footer&gt;Footer slot&lt;/footer&gt;
&lt;/div&gt;
&lt;div data-slot="after"&gt;
&lt;div class="showcase-slot"&gt;after slot&lt;/div&gt;
&lt;/div&gt;
&lt;/PublicPageShell&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Advanced</span><h2>Full-bleed landing page</h2><p>Allow full-width sections while keeping overflow and minimum-height behavior consistent.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="public-page-shell-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><PublicPageShell maxWidth="full" fullWidth="true" overflow="clip" minHeight="screen" size="lg" variant="success" class="showcase-instance showcase-instance--3">
<div class="showcase-shell-preview">
<header>Header slot</header>
<main>Public page content</main>
<footer>Footer slot</footer>
</div></PublicPageShell></div>
</div>
<section class="demo-code" aria-label="Full-bleed landing page usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;PublicPageShell
size="lg"
variant="success"&gt;
&lt;div data-slot="before"&gt;
&lt;div class="showcase-slot"&gt;before slot&lt;/div&gt;
&lt;/div&gt;
&lt;div class="showcase-shell-preview"&gt;
&lt;header&gt;Header slot&lt;/header&gt;
&lt;main&gt;Public page content&lt;/main&gt;
&lt;footer&gt;Footer slot&lt;/footer&gt;
&lt;/div&gt;
&lt;div data-slot="after"&gt;
&lt;div class="showcase-slot"&gt;after slot&lt;/div&gt;
&lt;/div&gt;
&lt;/PublicPageShell&gt;</code></pre>
</section>
</div>
</article></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>headerOffset</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>background</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>overflow</code></td><td>string</td><td><code>"clip"</code></td><td>No</td></tr><tr><td><code>minHeight</code></td><td>string</td><td><code>"screen"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main>
<aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#public-page-shell-demo-1">Complete public page shell</a><a href="#public-page-shell-demo-2">Constrained documentation shell</a><a href="#public-page-shell-demo-3">Full-bleed landing page</a><a href="#api">Props API</a></div>
</aside>
</div>
<nav class="detail-pagination">
<a href="/components/link"><small>Previous</small><strong>← Link</strong></a>
<a href="/components/section"><small>Next</small><strong>Section →</strong></a>
</nav>
}
}
app/pages/components/radio.wrn
+479 -459
View File
@@ -51,118 +51,123 @@ page RadioDetail {
<div class="playground-preview-source" data-playground-preview><Radio size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' options='{playground_options}' checked='{playground_checked}' orientation='{playground_orientation}' card='{playground_card}' rightAligned='{playground_rightAligned}' list='{playground_list}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Radio size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' options='{playground_options}' checked='{playground_checked}' orientation='{playground_orientation}' card='{playground_card}' rightAligned='{playground_rightAligned}' list='{playground_list}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Radio <pre><code data-playground-code>page RadioExample <span>&#123;</span>
placeholder="Enter a sample value" state options = [
value="sample-1" <span>&#123;</span>
options='[ "id": "radio-0-1",
<span>&#123;</span> "key": "radio-0-1",
"id": "radio-0-1", "value": "primary",
"key": "radio-0-1", "label": "Primary workflow",
"value": "primary", "title": "Primary workflow",
"label": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"title": "Primary workflow", "text": "A configurable sample message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#radio-demo",
"text": "A configurable sample message.", "actionHref": "#radio-demo",
"href": "#radio-demo", "actionLabel": "View details",
"actionHref": "#radio-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": true,
"time": "09:30", "selected": true,
"current": true, "checked": true,
"selected": true, "disabled": false,
"checked": true, "outgoing": false,
"disabled": false, "open": true,
"outgoing": false, "number": 1,
"open": true, "count": 16,
"number": 1, "percentage": 72,
"count": 16, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 1",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>,
] <span>&#123;</span>
<span>&#125;</span>, "id": "radio-0-2",
<span>&#123;</span> "key": "radio-0-2",
"id": "radio-0-2", "value": "secondary",
"key": "radio-0-2", "label": "Additional option",
"value": "secondary", "title": "Supporting example",
"label": "Additional option", "description": "A clean default configuration for everyday product interfaces.",
"title": "Supporting example", "text": "Another configurable message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#radio-demo",
"text": "Another configurable message.", "actionHref": "#radio-demo",
"href": "#radio-demo", "actionLabel": "View details",
"actionHref": "#radio-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": false,
"time": "09:30", "selected": false,
"current": false, "checked": false,
"selected": false, "disabled": false,
"checked": false, "outgoing": true,
"disabled": false, "open": true,
"outgoing": true, "number": 2,
"open": true, "count": 32,
"number": 2, "percentage": 72,
"count": 32, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 2",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>
] ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;Radio
/&gt;</code></pre> placeholder="Enter a sample value"
value="sample-1"
options="<span>&#123;</span>options<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
@@ -291,123 +296,128 @@ page RadioDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="radio-demo-1" class="demo-canvas demo-canvas--1"> <div id="radio-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Radio size="default" label="Radio" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" options='[{"id":"radio-0-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-0-2","key":"radio-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Radio size="default" label="Radio" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" options='[{"id":"radio-0-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-0-2","key":"radio-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Production default usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Radio <pre><code>page RadioExample <span>&#123;</span>
placeholder="Enter a sample value" state options = [
value="sample-1" <span>&#123;</span>
options='[ "id": "radio-0-1",
<span>&#123;</span> "key": "radio-0-1",
"id": "radio-0-1", "value": "primary",
"key": "radio-0-1", "label": "Primary workflow",
"value": "primary", "title": "Primary workflow",
"label": "Primary workflow", "description": "A clean default configuration for everyday product interfaces.",
"title": "Primary workflow", "text": "A configurable sample message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#radio-demo",
"text": "A configurable sample message.", "actionHref": "#radio-demo",
"href": "#radio-demo", "actionLabel": "View details",
"actionHref": "#radio-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": true,
"time": "09:30", "selected": true,
"current": true, "checked": true,
"selected": true, "disabled": false,
"checked": true, "outgoing": false,
"disabled": false, "open": true,
"outgoing": false, "number": 1,
"open": true, "count": 16,
"number": 1, "percentage": 72,
"count": 16, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 1",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>,
] <span>&#123;</span>
<span>&#125;</span>, "id": "radio-0-2",
<span>&#123;</span> "key": "radio-0-2",
"id": "radio-0-2", "value": "secondary",
"key": "radio-0-2", "label": "Additional option",
"value": "secondary", "title": "Supporting example",
"label": "Additional option", "description": "A clean default configuration for everyday product interfaces.",
"title": "Supporting example", "text": "Another configurable message.",
"description": "A clean default configuration for everyday product interfaces.", "href": "#radio-demo",
"text": "Another configurable message.", "actionHref": "#radio-demo",
"href": "#radio-demo", "actionLabel": "View details",
"actionHref": "#radio-demo", "icon": "icon-[lucide--sparkles]",
"actionLabel": "View details", "iconClass": "icon-[lucide--sparkles]",
"icon": "icon-[lucide--sparkles]", "variant": "primary",
"iconClass": "icon-[lucide--sparkles]", "status": "Active",
"variant": "primary", "time": "09:30",
"status": "Active", "current": false,
"time": "09:30", "selected": false,
"current": false, "checked": false,
"selected": false, "disabled": false,
"checked": false, "outgoing": true,
"disabled": false, "open": true,
"outgoing": true, "number": 2,
"open": true, "count": 32,
"number": 2, "percentage": 72,
"count": 32, "color": "#7c3aed",
"percentage": 72, "target": "_self",
"color": "#7c3aed", "ariaLabel": "Open primary workflow 2",
"target": "_self", "items": [
"ariaLabel": "Open primary workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option A",
<span>&#123;</span> "value": "nested-a"
"label": "Nested option A", <span>&#125;</span>,
"value": "nested-a" <span>&#123;</span>
<span>&#125;</span>, "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option B", <span>&#125;</span>
"value": "nested-b" ],
<span>&#125;</span> "links": [
], <span>&#123;</span>
"links": [ "label": "Documentation",
<span>&#123;</span> "href": "#documentation"
"label": "Documentation", <span>&#125;</span>,
"href": "#documentation" <span>&#123;</span>
<span>&#125;</span>, "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "API reference", <span>&#125;</span>
"href": "#api-reference" ],
<span>&#125;</span> "values": [
], "Included",
"values": [ "Standard"
"Included", ]
"Standard" <span>&#125;</span>
] ]
<span>&#125;</span> view <span>&#123;</span>
]' &lt;Radio
/&gt;</code></pre> placeholder="Enter a sample value"
value="sample-1"
options="<span>&#123;</span>options<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -419,127 +429,132 @@ page RadioDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="radio-demo-2" class="demo-canvas demo-canvas--2"> <div id="radio-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Radio size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" options='[{"id":"radio-1-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-1-2","key":"radio-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Radio size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" options='[{"id":"radio-1-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-1-2","key":"radio-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Radio <pre><code>page RadioExample <span>&#123;</span>
size="sm" state options = [
label="Compact example" <span>&#123;</span>
placeholder="Enter a sample value" "id": "radio-1-1",
variant="secondary" "key": "radio-1-1",
icon="icon-[lucide--arrow-right]" "value": "primary",
value="sample-2" "label": "Secondary workflow",
options='[ "title": "Secondary workflow",
<span>&#123;</span> "description": "A compact configuration designed for dense application layouts.",
"id": "radio-1-1", "text": "A configurable sample message.",
"key": "radio-1-1", "href": "#radio-demo",
"value": "primary", "actionHref": "#radio-demo",
"label": "Secondary workflow", "actionLabel": "View details",
"title": "Secondary workflow", "icon": "icon-[lucide--zap]",
"description": "A compact configuration designed for dense application layouts.", "iconClass": "icon-[lucide--zap]",
"text": "A configurable sample message.", "variant": "secondary",
"href": "#radio-demo", "status": "Active",
"actionHref": "#radio-demo", "time": "10:15",
"actionLabel": "View details", "current": true,
"icon": "icon-[lucide--zap]", "selected": true,
"iconClass": "icon-[lucide--zap]", "checked": true,
"variant": "secondary", "disabled": false,
"status": "Active", "outgoing": false,
"time": "10:15", "open": true,
"current": true, "number": 1,
"selected": true, "count": 24,
"checked": true, "percentage": 48,
"disabled": false, "color": "#0284c7",
"outgoing": false, "target": "_self",
"open": true, "ariaLabel": "Open secondary workflow 1",
"number": 1, "items": [
"count": 24, <span>&#123;</span>
"percentage": 48, "label": "Nested option A",
"color": "#0284c7", "value": "nested-a"
"target": "_self", <span>&#125;</span>,
"ariaLabel": "Open secondary workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option A", <span>&#125;</span>
"value": "nested-a" ],
<span>&#125;</span>, "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Documentation",
"value": "nested-b" "href": "#documentation"
<span>&#125;</span> <span>&#125;</span>,
], <span>&#123;</span>
"links": [ "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "Documentation", <span>&#125;</span>
"href": "#documentation" ],
<span>&#125;</span>, "values": [
<span>&#123;</span> "Included",
"label": "API reference", "Standard"
"href": "#api-reference" ]
<span>&#125;</span> <span>&#125;</span>,
], <span>&#123;</span>
"values": [ "id": "radio-1-2",
"Included", "key": "radio-1-2",
"Standard" "value": "secondary",
] "label": "Additional option",
<span>&#125;</span>, "title": "Supporting example",
<span>&#123;</span> "description": "A compact configuration designed for dense application layouts.",
"id": "radio-1-2", "text": "Another configurable message.",
"key": "radio-1-2", "href": "#radio-demo",
"value": "secondary", "actionHref": "#radio-demo",
"label": "Additional option", "actionLabel": "View details",
"title": "Supporting example", "icon": "icon-[lucide--zap]",
"description": "A compact configuration designed for dense application layouts.", "iconClass": "icon-[lucide--zap]",
"text": "Another configurable message.", "variant": "secondary",
"href": "#radio-demo", "status": "Active",
"actionHref": "#radio-demo", "time": "10:15",
"actionLabel": "View details", "current": false,
"icon": "icon-[lucide--zap]", "selected": false,
"iconClass": "icon-[lucide--zap]", "checked": false,
"variant": "secondary", "disabled": false,
"status": "Active", "outgoing": true,
"time": "10:15", "open": true,
"current": false, "number": 2,
"selected": false, "count": 48,
"checked": false, "percentage": 48,
"disabled": false, "color": "#0284c7",
"outgoing": true, "target": "_self",
"open": true, "ariaLabel": "Open secondary workflow 2",
"number": 2, "items": [
"count": 48, <span>&#123;</span>
"percentage": 48, "label": "Nested option A",
"color": "#0284c7", "value": "nested-a"
"target": "_self", <span>&#125;</span>,
"ariaLabel": "Open secondary workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option A", <span>&#125;</span>
"value": "nested-a" ],
<span>&#125;</span>, "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Documentation",
"value": "nested-b" "href": "#documentation"
<span>&#125;</span> <span>&#125;</span>,
], <span>&#123;</span>
"links": [ "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "Documentation", <span>&#125;</span>
"href": "#documentation" ],
<span>&#125;</span>, "values": [
<span>&#123;</span> "Included",
"label": "API reference", "Standard"
"href": "#api-reference" ]
<span>&#125;</span> <span>&#125;</span>
], ]
"values": [ view <span>&#123;</span>
"Included", &lt;Radio
"Standard" size="sm"
] label="Compact example"
<span>&#125;</span> placeholder="Enter a sample value"
]' variant="secondary"
/&gt;</code></pre> icon="icon-[lucide--arrow-right]"
value="sample-2"
options="<span>&#123;</span>options<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -551,127 +566,132 @@ page RadioDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="radio-demo-3" class="demo-canvas demo-canvas--3"> <div id="radio-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Radio size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" options='[{"id":"radio-2-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-2-2","key":"radio-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":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Radio size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" options='[{"id":"radio-2-1","key":"radio-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":"#radio-demo","actionHref":"#radio-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":"radio-2-2","key":"radio-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":"#radio-demo","actionHref":"#radio-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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Radio <pre><code>page RadioExample <span>&#123;</span>
size="lg" state options = [
label="Advanced example" <span>&#123;</span>
placeholder="Search by name, email, or identifier" "id": "radio-2-1",
variant="success" "key": "radio-2-1",
icon="icon-[lucide--trash-2]" "value": "primary",
value="sample-3" "label": "Advanced workflow",
options='[ "title": "Advanced workflow",
<span>&#123;</span> "description": "A richer configuration with more supporting information and actions.",
"id": "radio-2-1", "text": "A configurable sample message.",
"key": "radio-2-1", "href": "#radio-demo",
"value": "primary", "actionHref": "#radio-demo",
"label": "Advanced workflow", "actionLabel": "Explore workflow",
"title": "Advanced workflow", "icon": "icon-[lucide--circle-check]",
"description": "A richer configuration with more supporting information and actions.", "iconClass": "icon-[lucide--circle-check]",
"text": "A configurable sample message.", "variant": "success",
"href": "#radio-demo", "status": "Complete",
"actionHref": "#radio-demo", "time": "11:45",
"actionLabel": "Explore workflow", "current": true,
"icon": "icon-[lucide--circle-check]", "selected": true,
"iconClass": "icon-[lucide--circle-check]", "checked": true,
"variant": "success", "disabled": false,
"status": "Complete", "outgoing": false,
"time": "11:45", "open": true,
"current": true, "number": 1,
"selected": true, "count": 32,
"checked": true, "percentage": 91,
"disabled": false, "color": "#059669",
"outgoing": false, "target": "_self",
"open": true, "ariaLabel": "Open advanced workflow 1",
"number": 1, "items": [
"count": 32, <span>&#123;</span>
"percentage": 91, "label": "Nested option A",
"color": "#059669", "value": "nested-a"
"target": "_self", <span>&#125;</span>,
"ariaLabel": "Open advanced workflow 1", <span>&#123;</span>
"items": [ "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option A", <span>&#125;</span>
"value": "nested-a" ],
<span>&#125;</span>, "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Documentation",
"value": "nested-b" "href": "#documentation"
<span>&#125;</span> <span>&#125;</span>,
], <span>&#123;</span>
"links": [ "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "Documentation", <span>&#125;</span>
"href": "#documentation" ],
<span>&#125;</span>, "values": [
<span>&#123;</span> "Included",
"label": "API reference", "Unlimited"
"href": "#api-reference" ]
<span>&#125;</span> <span>&#125;</span>,
], <span>&#123;</span>
"values": [ "id": "radio-2-2",
"Included", "key": "radio-2-2",
"Unlimited" "value": "secondary",
] "label": "Additional option",
<span>&#125;</span>, "title": "Supporting example",
<span>&#123;</span> "description": "A richer configuration with more supporting information and actions.",
"id": "radio-2-2", "text": "Another configurable message.",
"key": "radio-2-2", "href": "#radio-demo",
"value": "secondary", "actionHref": "#radio-demo",
"label": "Additional option", "actionLabel": "Explore workflow",
"title": "Supporting example", "icon": "icon-[lucide--circle-check]",
"description": "A richer configuration with more supporting information and actions.", "iconClass": "icon-[lucide--circle-check]",
"text": "Another configurable message.", "variant": "success",
"href": "#radio-demo", "status": "Complete",
"actionHref": "#radio-demo", "time": "11:45",
"actionLabel": "Explore workflow", "current": false,
"icon": "icon-[lucide--circle-check]", "selected": false,
"iconClass": "icon-[lucide--circle-check]", "checked": false,
"variant": "success", "disabled": true,
"status": "Complete", "outgoing": true,
"time": "11:45", "open": true,
"current": false, "number": 2,
"selected": false, "count": 64,
"checked": false, "percentage": 91,
"disabled": true, "color": "#059669",
"outgoing": true, "target": "_self",
"open": true, "ariaLabel": "Open advanced workflow 2",
"number": 2, "items": [
"count": 64, <span>&#123;</span>
"percentage": 91, "label": "Nested option A",
"color": "#059669", "value": "nested-a"
"target": "_self", <span>&#125;</span>,
"ariaLabel": "Open advanced workflow 2", <span>&#123;</span>
"items": [ "label": "Nested option B",
<span>&#123;</span> "value": "nested-b"
"label": "Nested option A", <span>&#125;</span>
"value": "nested-a" ],
<span>&#125;</span>, "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Documentation",
"value": "nested-b" "href": "#documentation"
<span>&#125;</span> <span>&#125;</span>,
], <span>&#123;</span>
"links": [ "label": "API reference",
<span>&#123;</span> "href": "#api-reference"
"label": "Documentation", <span>&#125;</span>
"href": "#documentation" ],
<span>&#125;</span>, "values": [
<span>&#123;</span> "Included",
"label": "API reference", "Unlimited"
"href": "#api-reference" ]
<span>&#125;</span> <span>&#125;</span>
], ]
"values": [ view <span>&#123;</span>
"Included", &lt;Radio
"Unlimited" size="lg"
] label="Advanced example"
<span>&#125;</span> placeholder="Search by name, email, or identifier"
]' variant="success"
/&gt;</code></pre> icon="icon-[lucide--trash-2]"
value="sample-3"
options="<span>&#123;</span>options<span>&#125;</span>"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
app/pages/components/range-slider.wrn
+37 -614
View File
@@ -4,21 +4,21 @@ page RangeSliderDetail {
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_id = ctx.url.searchParams.get("pg_id") ?? "" state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
state playground_name = ctx.url.searchParams.get("pg_name") ?? "" state playground_name = ctx.url.searchParams.get("pg_name") ?? "volume"
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Range Slider" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Volume"
state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true" state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36") state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "40")
state playground_min = Number(ctx.url.searchParams.get("pg_min") ?? "0") state playground_min = Number(ctx.url.searchParams.get("pg_min") ?? "0")
state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100") state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1") state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1")
state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true" state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
state playground_showBounds = (ctx.url.searchParams.get("pg_showBounds") ?? "true") === "true" state playground_showBounds = (ctx.url.searchParams.get("pg_showBounds") ?? "true") === "true"
state playground_showSteps = (ctx.url.searchParams.get("pg_showSteps") ?? "true") === "true" state playground_showSteps = (ctx.url.searchParams.get("pg_showSteps") ?? "false") === "true"
state playground_marks = JSON.parse(ctx.url.searchParams.get("pg_marks") ?? "[{\"id\":\"range-slider-0-1\",\"key\":\"range-slider-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"range-slider-0-2\",\"key\":\"range-slider-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_marks = JSON.parse(ctx.url.searchParams.get("pg_marks") ?? "[]")
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
@@ -26,7 +26,7 @@ page RangeSliderDetail {
state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true" state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true" state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Range Slider" title = "Range Slider"
description = "Theme-aware, responsive range slider component." description = "Theme-aware, responsive range slider component."
@@ -52,234 +52,24 @@ page RangeSliderDetail {
<div class="playground-preview-source" data-playground-preview><RangeSlider size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' min='{playground_min}' max='{playground_max}' step='{playground_step}' showValue='{playground_showValue}' showBounds='{playground_showBounds}' showSteps='{playground_showSteps}' marks='{playground_marks}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><RangeSlider size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' min='{playground_min}' max='{playground_max}' step='{playground_step}' showValue='{playground_showValue}' showBounds='{playground_showBounds}' showSteps='{playground_showSteps}' marks='{playground_marks}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;RangeSlider <pre><code data-playground-code>page RangeSliderExample <span>&#123;</span>
label="Range Slider" state marks = []
placeholder="Enter a sample value" view <span>&#123;</span>
value="36" &lt;RangeSlider
showSteps="true" name="volume"
marks='[ label="Volume"
<span>&#123;</span> value="40"
"id": "range-slider-0-1", marks="<span>&#123;</span>marks<span>&#125;</span>"
"key": "range-slider-0-1", /&gt;
"value": "primary", <span>&#125;</span>
"label": "Primary workflow", <span>&#125;</span></code></pre>
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "range-slider-0-2",
"key": "range-slider-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Range Slider" /></label><label class="playground-toggle" for="playground-range-slider-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-range-slider-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-range-slider-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-range-slider-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-range-slider-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-range-slider-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>number</small></span><input id="playground-range-slider-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>number</small></span><input id="playground-range-slider-min" name="pg_min" type="number" value="0" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>number</small></span><input id="playground-range-slider-max" name="pg_max" type="number" value="100" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>number</small></span><input id="playground-range-slider-step" name="pg_step" type="number" value="1" /></label><label class="playground-toggle" for="playground-range-slider-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-range-slider-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showBounds"><span><strong>show Bounds</strong><small>boolean</small></span><input id="playground-range-slider-showBounds" name="pg_showBounds" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showSteps"><span><strong>show Steps</strong><small>boolean</small></span><input id="playground-range-slider-showSteps" name="pg_showSteps" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-marks"><span><strong>marks</strong><small>unknown[]</small></span><textarea id="playground-range-slider-marks" name="pg_marks" rows="5" spellcheck="false" dLine truncated <div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="volume" /></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Volume" /></label><label class="playground-toggle" for="playground-range-slider-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-range-slider-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-range-slider-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-range-slider-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-range-slider-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-range-slider-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>number</small></span><input id="playground-range-slider-value" name="pg_value" type="number" value="40" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>number</small></span><input id="playground-range-slider-min" name="pg_min" type="number" value="0" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>number</small></span><input id="playground-range-slider-max" name="pg_max" type="number" value="100" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>number</small></span><input id="playground-range-slider-step" name="pg_step" type="number" value="1" /></label><label class="playground-toggle" for="playground-range-slider-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-range-slider-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showBounds"><span><strong>show Bounds</strong><small>boolean</small></span><input id="playground-range-slider-showBounds" name="pg_showBounds" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showSteps"><span><strong>show Steps</strong><small>boolean</small></span><input id="playground-range-slider-showSteps" name="pg_showSteps" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-marks"><span><strong>marks</strong><small>unknown[]</small></span><textarea id="playground-range-slider-marks" name="pg_marks" rows="5" spellcheck="false" data-playground-json>[]</textLine truncated
&#123;
"id": "range-slider-0-1",
"key": "range-slider-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;,
&#123;
"id": "range-slider-0-2",
"key": "range-slider-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-range-slider-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-range-slider-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-range-slider-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-error"><span><strong>error</strong><small>string</small></span><input id="playground-range-slider-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-range-slider-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-range-slider-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-range-slider-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-range-slider-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-range-slider-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -288,397 +78,30 @@ page RangeSliderDetail {
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list"> <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div> <div><span class="demo-case-eyebrow">Compact</span><h2>Fractional steps</h2><p>Use step=0.2 for precise increments with buttons, dragging, or arrow keys.</p></div>
<span class="demo-case-number">01</span> <span class="demo-case-number">01</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="range-slider-demo-1" class="demo-canvas demo-canvas--1"> <div id="range-slider-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><RangeSlider size="default" label="Range Slider" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="36" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-0-1","key":"range-slider-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"range-slider-0-2","key":"range-slider-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><RangeSlider size="default" color="primary" id="" name="volume" label="Scale" hiddenLabel="false" placeholder="" variant="normal" icon="" iconPosition="start" value="2.4" min="0" max="5" step="0.2" showValue="true" showBounds="true" showSteps="false" marks='[]' helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Fractional steps usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;RangeSlider <pre><code>page RangeSliderExample <span>&#123;</span>
label="Range Slider" state marks = []
placeholder="Enter a sample value" view <span>&#123;</span>
value="36" &lt;RangeSlider
showSteps="true" name="volume"
marks='[ label="Scale"
<span>&#123;</span> value="2.4"
"id": "range-slider-0-1", max="5"
"key": "range-slider-0-1", step="0.2"
"value": "primary", marks="<span>&#123;</span>marks<span>&#125;</span>"
"label": "Primary workflow", /&gt;
"title": "Primary workflow", <span>&#125;</span>
"description": "A clean default configuration for everyday product interfaces.", <span>&#125;</span></code></pre>
"text": "A configurable sample message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "range-slider-0-2",
"key": "range-slider-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
<span class="demo-case-number">02</span>
</header>
<div class="demo-workbench">
<div id="range-slider-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><RangeSlider size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="60" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-1-1","key":"range-slider-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"range-slider-1-2","key":"range-slider-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Compact application usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;RangeSlider
size="sm"
label="Compact example"
placeholder="Enter a sample value"
variant="secondary"
icon="icon-[lucide--arrow-right]"
value="60"
showSteps="true"
marks='[
<span>&#123;</span>
"id": "range-slider-1-1",
"key": "range-slider-1-1",
"value": "primary",
"label": "Secondary workflow",
"title": "Secondary workflow",
"description": "A compact configuration designed for dense application layouts.",
"text": "A configurable sample message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "range-slider-1-2",
"key": "range-slider-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section>
</div>
</article>
<article class="demo-case">
<header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
<span class="demo-case-number">03</span>
</header>
<div class="demo-workbench">
<div id="range-slider-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><RangeSlider size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="84" min="0" max="100" step="1" showValue="true" showBounds="true" showSteps="true" marks='[{"id":"range-slider-2-1","key":"range-slider-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"range-slider-2-2","key":"range-slider-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#range-slider-demo","actionHref":"#range-slider-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Rich configuration usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;RangeSlider
size="lg"
label="Advanced example"
placeholder="Search by name, email, or identifier"
variant="success"
icon="icon-[lucide--trash-2]"
value="84"
showSteps="true"
marks='[
<span>&#123;</span>
"id": "range-slider-2-1",
"key": "range-slider-2-1",
"value": "primary",
"label": "Advanced workflow",
"title": "Advanced workflow",
"description": "A richer configuration with more supporting information and actions.",
"text": "A configurable sample message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "range-slider-2-2",
"key": "range-slider-2-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A richer configuration with more supporting information and actions.",
"text": "Another configurable message.",
"href": "#range-slider-demo",
"actionHref": "#range-slider-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -709,7 +132,7 @@ if (component) registerOutputHandler(component, "blur", (payload) =&gt; <span>&#
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Range"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>min</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showBounds</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showSteps</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>marks</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Range"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>min</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showBounds</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showSteps</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>marks</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#range-slider-demo-1">Production default</a><a href="#range-slider-demo-2">Compact application</a><a href="#range-slider-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#range-slider-demo-1">Fractional steps</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/rating.wrn
+70 -581
View File
@@ -3,11 +3,16 @@ page RatingDetail {
layout = "showcase" layout = "showcase"
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Rating example" state playground_title = ctx.url.searchParams.get("pg_title") ?? "How was your experience?"
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default rating for a modern application." state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"rating-0-1\",\"key\":\"rating-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\":\"#rating-demo\",\"actionHref\":\"#rating-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\":\"rating-0-2\",\"key\":\"rating-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#rating-demo\",\"actionHref\":\"#rating-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") ?? "[]")
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" 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_value = Number(ctx.url.searchParams.get("pg_value") ?? "4")
state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "5")
state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1")
state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
seo { seo {
title = "Rating" title = "Rating"
description = "Theme-aware, responsive rating component." description = "Theme-aware, responsive rating component."
@@ -21,7 +26,7 @@ page RatingDetail {
<span class="showcase-eyebrow">Base component</span> <span class="showcase-eyebrow">Base component</span>
<h1>Rating</h1> <h1>Rating</h1>
<p>Theme-aware, responsive rating component.</p> <p>Theme-aware, responsive rating component.</p>
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>12 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -30,235 +35,26 @@ page RatingDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Rating size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Rating size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' value='{playground_value}' max='{playground_max}' step='{playground_step}' readonly='{playground_readonly}' disabled='{playground_disabled}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Rating <pre><code data-playground-code>page RatingExample <span>&#123;</span>
title="Rating example" state items = []
description="A polished default rating for a modern application." view <span>&#123;</span>
items='[ &lt;Rating
<span>&#123;</span> title="How was your experience?"
"id": "rating-0-1", items="<span>&#123;</span>items<span>&#125;</span>"
"key": "rating-0-1", value="4"
"value": "primary", /&gt;
"label": "Primary workflow", <span>&#125;</span>
"title": "Primary workflow", <span>&#125;</span></code></pre>
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#rating-demo",
"actionHref": "#rating-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "rating-0-2",
"key": "rating-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#rating-demo",
"actionHref": "#rating-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-rating-size"><span><strong>size</strong><small>string</small></span><select id="playground-rating-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-rating-color"><span><strong>color</strong><small>string</small></span><select id="playground-rating-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-rating-title"><span><strong>title</strong><small>string</small></span><input id="playground-rating-title" name="pg_title" type="text" value="Rating example" /></label><label class="playground-field" for="playground-rating-description"><span><strong>description</strong><small>string</small></span><input id="playground-rating-description" name="pg_description" type="text" value="A polished default rating for a modern application." /></label><label class="playground-field" for="playground-rating-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-rating-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-rating-size"><span><strong>size</strong><small>string</small></span><select id="playground-rating-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-rating-color"><span><strong>color</strong><small>string</small></span><select id="playground-rating-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-rating-title"><span><strong>title</strong><small>string</small></span><input id="playground-rating-title" name="pg_title" type="text" value="How was your experience?" /></label><label class="playground-field" for="playground-rating-description"><span><strong>description</strong><small>string</small></span><input id="playground-rating-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-rating-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-rating-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-rating-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-rating-value"><span><strong>value</strong><small>number</small></span><input id="playground-rating-value" name="pg_value" type="number" value="4" /></label><label class="playground-field" for="playground-rating-max"><span><strong>max</strong><small>number</small></span><input id="playground-rating-max" name="pg_max" type="number" value="5" /></label><label class="playground-field" for="playground-rating-step"><span><strong>step</strong><small>number</small></span><input id="playground-rating-step" name="pg_step" type="number" value="1" /></label><label class="playground-toggle" for="playground-rating-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-rating-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-rating-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-rating-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="" /></label></div>
&#123;
"id": "rating-0-1",
"key": "rating-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": "#rating-demo",
"actionHref": "#rating-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;,
&#123;
"id": "rating-0-2",
"key": "rating-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#rating-demo",
"actionHref": "#rating-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": [
&#123;
"label": "Nested option A",
"value": "nested-a"
&#125;,
&#123;
"label": "Nested option B",
"value": "nested-b"
&#125;
],
"links": [
&#123;
"label": "Documentation",
"href": "#documentation"
&#125;,
&#123;
"label": "API reference",
"href": "#api-reference"
&#125;
],
"values": [
"Included",
"Standard"
]
&#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-rating-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -267,389 +63,82 @@ page RatingDetail {
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list"> <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div> <div><span class="demo-case-eyebrow">Recommended</span><h2>Whole stars</h2><p>Choose a rating from zero to five with step 1.</p></div>
<span class="demo-case-number">01</span> <span class="demo-case-number">01</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="rating-demo-1" class="demo-canvas demo-canvas--1"> <div id="rating-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Rating size="default" title="Rating example" description="A polished default rating for a modern application." items='[{"id":"rating-0-1","key":"rating-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":"#rating-demo","actionHref":"#rating-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":"rating-0-2","key":"rating-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-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"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><Rating size="default" color="primary" title="Rate your experience" description="" items='[]' variant="default" value="3" max="5" step="1" readonly="false" disabled="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Production default usage"> <section class="demo-code" aria-label="Whole stars usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Rating <pre><code>page RatingExample <span>&#123;</span>
title="Rating example" state items = []
description="A polished default rating for a modern application." view <span>&#123;</span>
items='[ &lt;Rating
<span>&#123;</span> title="Rate your experience"
"id": "rating-0-1", items="<span>&#123;</span>items<span>&#125;</span>"
"key": "rating-0-1", value="3"
"value": "primary", /&gt;
"label": "Primary workflow", <span>&#125;</span>
"title": "Primary workflow", <span>&#125;</span></code></pre>
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#rating-demo",
"actionHref": "#rating-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "rating-0-2",
"key": "rating-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#rating-demo",
"actionHref": "#rating-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div> <div><span class="demo-case-eyebrow">Compact</span><h2>Half stars</h2><p>Click a half star or use the precise slider and arrow keys.</p></div>
<span class="demo-case-number">02</span> <span class="demo-case-number">02</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="rating-demo-2" class="demo-canvas demo-canvas--2"> <div id="rating-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Rating size="sm" title="Compact Rating" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"rating-1-1","key":"rating-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":"#rating-demo","actionHref":"#rating-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":"rating-1-2","key":"rating-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Rating size="default" color="primary" title="Half-star rating" description="" items='[]' variant="default" value="3.5" max="5" step="0.5" readonly="false" disabled="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact application usage"> <section class="demo-code" aria-label="Half stars usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Rating <pre><code>page RatingExample <span>&#123;</span>
size="sm" state items = []
title="Compact Rating" view <span>&#123;</span>
description="A compact configuration for dashboards and dense product surfaces." &lt;Rating
items='[ title="Half-star rating"
<span>&#123;</span> items="<span>&#123;</span>items<span>&#125;</span>"
"id": "rating-1-1", value="3.5"
"key": "rating-1-1", step="0.5"
"value": "primary", /&gt;
"label": "Secondary workflow", <span>&#125;</span>
"title": "Secondary workflow", <span>&#125;</span></code></pre>
"description": "A compact configuration designed for dense application layouts.",
"text": "A configurable sample message.",
"href": "#rating-demo",
"actionHref": "#rating-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 24,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "rating-1-2",
"key": "rating-1-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A compact configuration designed for dense application layouts.",
"text": "Another configurable message.",
"href": "#rating-demo",
"actionHref": "#rating-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--zap]",
"iconClass": "icon-[lucide--zap]",
"variant": "secondary",
"status": "Active",
"time": "10:15",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 48,
"percentage": 48,
"color": "#0284c7",
"target": "_self",
"ariaLabel": "Open secondary workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Standard"
]
<span>&#125;</span>
]'
variant="secondary"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article> </article>
<article class="demo-case"> <article class="demo-case">
<header class="demo-case-header"> <header class="demo-case-header">
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div> <div><span class="demo-case-eyebrow">Advanced</span><h2>Fine increments</h2><p>Use increments of 0.2 for a more precise rating.</p></div>
<span class="demo-case-number">03</span> <span class="demo-case-number">03</span>
</header> </header>
<div class="demo-workbench"> <div class="demo-workbench">
<div id="rating-demo-3" class="demo-canvas demo-canvas--3"> <div id="rating-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Rating size="lg" title="Advanced Rating" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"rating-2-1","key":"rating-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":"#rating-demo","actionHref":"#rating-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":"rating-2-2","key":"rating-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":"#rating-demo","actionHref":"#rating-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><Rating size="default" color="primary" title="Detailed score" description="" items='[]' variant="default" value="4.2" max="5" step="0.2" readonly="true" disabled="false" class="" /></div>
</div> </div>
<section class="demo-code" aria-label="Rich configuration usage"> <section class="demo-code" aria-label="Fine increments usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Rating <pre><code>page RatingExample <span>&#123;</span>
size="lg" state items = []
title="Advanced Rating" view <span>&#123;</span>
description="A richer configuration demonstrating additional content and hierarchy." &lt;Rating
items='[ title="Detailed score"
<span>&#123;</span> items="<span>&#123;</span>items<span>&#125;</span>"
"id": "rating-2-1", value="4.2"
"key": "rating-2-1", step="0.2"
"value": "primary", readonly="true"
"label": "Advanced workflow", /&gt;
"title": "Advanced workflow", <span>&#125;</span>
"description": "A richer configuration with more supporting information and actions.", <span>&#125;</span></code></pre>
"text": "A configurable sample message.",
"href": "#rating-demo",
"actionHref": "#rating-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 32,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 1",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>,
<span>&#123;</span>
"id": "rating-2-2",
"key": "rating-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": "#rating-demo",
"actionHref": "#rating-demo",
"actionLabel": "Explore workflow",
"icon": "icon-[lucide--circle-check]",
"iconClass": "icon-[lucide--circle-check]",
"variant": "success",
"status": "Complete",
"time": "11:45",
"current": false,
"selected": false,
"checked": false,
"disabled": true,
"outgoing": true,
"open": true,
"number": 2,
"count": 64,
"percentage": 91,
"color": "#059669",
"target": "_self",
"ariaLabel": "Open advanced workflow 2",
"items": [
<span>&#123;</span>
"label": "Nested option A",
"value": "nested-a"
<span>&#125;</span>,
<span>&#123;</span>
"label": "Nested option B",
"value": "nested-b"
<span>&#125;</span>
],
"links": [
<span>&#123;</span>
"label": "Documentation",
"href": "#documentation"
<span>&#125;</span>,
<span>&#123;</span>
"label": "API reference",
"href": "#api-reference"
<span>&#125;</span>
],
"values": [
"Included",
"Unlimited"
]
<span>&#125;</span>
]'
variant="success"
/&gt;</code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -667,10 +156,10 @@ if (component) registerOutputHandler(component, "input", (payload) =&gt; <span>&
if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
console.log("change", payload) console.log("change", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Rating"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Rating"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>5</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#rating-demo-1">Production default</a><a href="#rating-demo-2">Compact application</a><a href="#rating-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#rating-demo-1">Whole stars</a><a href="#rating-demo-2">Half stars</a><a href="#rating-demo-3">Fine increments</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
</aside> </aside>
</div> </div>
<nav class="detail-pagination"> <nav class="detail-pagination">
app/pages/components/scrollspy.wrn
+182 -163
View File
@@ -7,6 +7,10 @@ page ScrollspyDetail {
state playground_active = ctx.url.searchParams.get("pg_active") ?? "" state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Scrollspy" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Scrollspy"
state playground_heading = ctx.url.searchParams.get("pg_heading") ?? "" state playground_heading = ctx.url.searchParams.get("pg_heading") ?? ""
state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
state playground_topOffset = ctx.url.searchParams.get("pg_topOffset") ?? "6rem"
state playground_sectionOffset = ctx.url.searchParams.get("pg_sectionOffset") ?? "7rem"
state playground_collapseAt = ctx.url.searchParams.get("pg_collapseAt") ?? "800px"
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
seo { seo {
title = "Scrollspy" title = "Scrollspy"
@@ -21,7 +25,7 @@ page ScrollspyDetail {
<span class="showcase-eyebrow">Navigation component</span> <span class="showcase-eyebrow">Navigation component</span>
<h1>Scrollspy</h1> <h1>Scrollspy</h1>
<p>Theme-aware, responsive scrollspy component.</p> <p>Theme-aware, responsive scrollspy component.</p>
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div> <div class="detail-badges"><span>11 props</span><span>1 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
</div> </div>
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div> <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
</header> </header>
@@ -30,126 +34,131 @@ page ScrollspyDetail {
<div class="playground-workbench"> <div class="playground-workbench">
<div class="playground-preview"> <div class="playground-preview">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="playground-preview-source" data-playground-preview><Scrollspy color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' label='{playground_label}' heading='{playground_heading}' class='{playground_class}' /></div> <div class="playground-preview-source" data-playground-preview><Scrollspy color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' label='{playground_label}' heading='{playground_heading}' sticky='{playground_sticky}' topOffset='{playground_topOffset}' sectionOffset='{playground_sectionOffset}' collapseAt='{playground_collapseAt}' class='{playground_class}' /></div>
<section class="playground-code" aria-label="Current component code"> <section class="playground-code" aria-label="Current component code">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
<pre><code data-playground-code>&lt;Scrollspy <pre><code data-playground-code>page ScrollspyExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"id": "scrollspy-0-1", "id": "scrollspy-0-1",
"key": "scrollspy-0-1", "key": "scrollspy-0-1",
"value": "primary", "value": "primary",
"label": "Primary workflow", "label": "Primary workflow",
"title": "Primary workflow", "title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.", "text": "A configurable sample message.",
"href": "#scrollspy-demo", "href": "#scrollspy-demo",
"actionHref": "#scrollspy-demo", "actionHref": "#scrollspy-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": true, "current": true,
"selected": true, "selected": true,
"checked": true, "checked": true,
"disabled": false, "disabled": false,
"outgoing": false, "outgoing": false,
"open": true, "open": true,
"number": 1, "number": 1,
"count": 16, "count": 16,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 1", "ariaLabel": "Open primary workflow 1",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"id": "scrollspy-0-2", "id": "scrollspy-0-2",
"key": "scrollspy-0-2", "key": "scrollspy-0-2",
"value": "secondary", "value": "secondary",
"label": "Additional option", "label": "Additional option",
"title": "Supporting example", "title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.", "description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.", "text": "Another configurable message.",
"href": "#scrollspy-demo", "href": "#scrollspy-demo",
"actionHref": "#scrollspy-demo", "actionHref": "#scrollspy-demo",
"actionLabel": "View details", "actionLabel": "View details",
"icon": "icon-[lucide--sparkles]", "icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]", "iconClass": "icon-[lucide--sparkles]",
"variant": "primary", "variant": "primary",
"status": "Active", "status": "Active",
"time": "09:30", "time": "09:30",
"current": false, "current": false,
"selected": false, "selected": false,
"checked": false, "checked": false,
"disabled": false, "disabled": false,
"outgoing": true, "outgoing": true,
"open": true, "open": true,
"number": 2, "number": 2,
"count": 32, "count": 32,
"percentage": 72, "percentage": 72,
"color": "#7c3aed", "color": "#7c3aed",
"target": "_self", "target": "_self",
"ariaLabel": "Open primary workflow 2", "ariaLabel": "Open primary workflow 2",
"items": [ "items": [
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option A", "label": "Nested option A",
"value": "nested-a" "value": "nested-a"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Nested option B", "label": "Nested option B",
"value": "nested-b" "value": "nested-b"
<span>&#125;</span> <span>&#125;</span>
], ],
"links": [ "links": [
<span>&#123;</span> <span>&#123;</span>
"label": "Documentation", "label": "Documentation",
"href": "#documentation" "href": "#documentation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API reference", "label": "API reference",
"href": "#api-reference" "href": "#api-reference"
<span>&#125;</span> <span>&#125;</span>
], ],
"values": [ "values": [
"Included", "Included",
"Standard" "Standard"
] ]
<span>&#125;</span> <span>&#125;</span>
]' ]
label="Scrollspy" view <span>&#123;</span>
/&gt;</code></pre> &lt;Scrollspy
items="<span>&#123;</span>items<span>&#125;</span>"
label="Scrollspy"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
<div class="playground-status" data-playground-status aria-live="polite"></div> <div class="playground-status" data-playground-status aria-live="polite"></div>
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div> <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
</div> </div>
<form class="playground-controls" data-playground-form> <form class="playground-controls" data-playground-form>
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header> <header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
<div class="playground-fields"><label class="playground-field" for="playground-scrollspy-color"><span><strong>color</strong><small>string</small></span><select id="playground-scrollspy-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-scrollspy-size"><span><strong>size</strong><small>string</small></span><select id="playground-scrollspy-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-scrollspy-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-scrollspy-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[ <div class="playground-fields"><label class="playground-field" for="playground-scrollspy-color"><span><strong>color</strong><small>string</small></span><select id="playground-scrollspy-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-scrollspy-size"><span><strong>size</strong><small>string</small></span><select id="playground-scrollspy-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-scrollspy-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-scrollspy-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
&#123; &#123;
"id": "scrollspy-0-1", "id": "scrollspy-0-1",
@@ -257,7 +266,7 @@ page ScrollspyDetail {
"Standard" "Standard"
] ]
&#125; &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-scrollspy-active"><span><strong>active</strong><small>string</small></span><input id="playground-scrollspy-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-heading"><span><strong>heading</strong><small>string</small></span><input id="playground-scrollspy-heading" name="pg_heading" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-class"><span><strong>class</strong><small>string</small></span><input id="playground-scrollspy-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div> ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-scrollspy-active"><span><strong>active</strong><small>string</small></span><input id="playground-scrollspy-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-heading"><span><strong>heading</strong><small>string</small></span><input id="playground-scrollspy-heading" name="pg_heading" type="text" value="" /></label><label class="playground-toggle" for="playground-scrollspy-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-scrollspy-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-scrollspy-topOffset"><span><strong>top Offset</strong><small>string</small></span><input id="playground-scrollspy-topOffset" name="pg_topOffset" type="text" value="6rem" /></label><label class="playground-field" for="playground-scrollspy-sectionOffset"><span><strong>section Offset</strong><small>string</small></span><input id="playground-scrollspy-sectionOffset" name="pg_sectionOffset" type="text" value="7rem" /></label><label class="playground-field" for="playground-scrollspy-collapseAt"><span><strong>collapse At</strong><small>string</small></span><input id="playground-scrollspy-collapseAt" name="pg_collapseAt" type="text" value="800px" /></label><label class="playground-field" for="playground-scrollspy-class"><span><strong>class</strong><small>string</small></span><input id="playground-scrollspy-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
</form> </form>
</div> </div>
</section> </section>
@@ -272,34 +281,39 @@ page ScrollspyDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="scrollspy-demo-1" class="demo-canvas demo-canvas--1"> <div id="scrollspy-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is wired up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is connected up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" sticky="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Follows the reader usage"> <section class="demo-code" aria-label="Follows the reader usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Scrollspy <pre><code>page ScrollspyExample <span>&#123;</span>
items='[ state items = [
<span>&#123;</span> <span>&#123;</span>
"label": "Overview", "label": "Overview",
"href": "#overview" "href": "#overview"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Installation", "label": "Installation",
"href": "#installation" "href": "#installation"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "Usage", "label": "Usage",
"href": "#usage" "href": "#usage"
<span>&#125;</span>, <span>&#125;</span>,
<span>&#123;</span> <span>&#123;</span>
"label": "API", "label": "API",
"href": "#api" "href": "#api"
<span>&#125;</span> <span>&#125;</span>
]' ]
active="#overview" view <span>&#123;</span>
label="Scrollspy" &lt;Scrollspy
heading="On this page" items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;</code></pre> active="#overview"
label="Scrollspy"
heading="On this page"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article> </article>
@@ -311,31 +325,36 @@ page ScrollspyDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="scrollspy-demo-2" class="demo-canvas demo-canvas--2"> <div id="scrollspy-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Scrollspy size="sm" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"}]' active="#installation" label="Compact example" heading="Sections" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><Scrollspy size="sm" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"}]' active="#installation" label="Compact example" heading="Sections" sticky="false" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact rail usage"> <section class="demo-code" aria-label="Compact rail usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header> <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Scrollspy <pre><code>page ScrollspyExample <span>&#123;</span>
size="sm" state items = [
items='[ <span>&#123;</span>
<span>&#123;</span> "label": "Overview",
"label": "Overview", "href": "#overview"
"href": "#overview" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Installation",
"label": "Installation", "href": "#installation"
"href": "#installation" <span>&#125;</span>,
<span>&#125;</span>, <span>&#123;</span>
<span>&#123;</span> "label": "Usage",
"label": "Usage", "href": "#usage"
"href": "#usage" <span>&#125;</span>
<span>&#125;</span> ]
]' view <span>&#123;</span>
active="#installation" &lt;Scrollspy
label="Compact example" size="sm"
heading="Sections" items="<span>&#123;</span>items<span>&#125;</span>"
/&gt;</code></pre> active="#installation"
label="Compact example"
heading="Sections"
/&gt;
<span>&#125;</span>
<span>&#125;</span></code></pre>
</section> </section>
</div> </div>
</article></div></section> </article></div></section>
@@ -348,7 +367,7 @@ const component = document.querySelector("[data-ui-component=\"Scrollspy\"], [da
if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span> if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
console.log("change", payload) console.log("change", payload)
<span>&#125;</span>)</code></pre></section></div></div></section> <span>&#125;</span>)</code></pre></section></div></div></section>
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"On this page"</code></td><td>No</td></tr><tr><td><code>heading</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section> <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"On this page"</code></td><td>No</td></tr><tr><td><code>heading</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>sticky</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>topOffset</code></td><td>string</td><td><code>"6rem"</code></td><td>No</td></tr><tr><td><code>sectionOffset</code></td><td>string</td><td><code>"7rem"</code></td><td>No</td></tr><tr><td><code>collapseAt</code></td><td>string</td><td><code>"800px"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
</main> </main>
<aside class="detail-aside"> <aside class="detail-aside">
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#scrollspy-demo-1">Follows the reader</a><a href="#scrollspy-demo-2">Compact rail</a><a href="#events">Outputs</a><a href="#api">Props API</a></div> <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#scrollspy-demo-1">Follows the reader</a><a href="#scrollspy-demo-2">Compact rail</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
app/pages/components/search-box.wrn
+3 -3
View File
@@ -64,7 +64,7 @@ page SearchBoxDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="search-box-demo-1" class="demo-canvas demo-canvas--1"> <div id="search-box-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><SearchBox size="default" label="Search documentation" name="site-search" value="sample-1" placeholder="Search components and guides" type="search" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div> <div class="demo-render"><SearchBox size="default" label="Search documentation" name="site-search" value="sample-1" placeholder="Search components and guides" type="search" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
</div> </div>
<section class="demo-code" aria-label="Site search usage"> <section class="demo-code" aria-label="Site search usage">
@@ -86,7 +86,7 @@ page SearchBoxDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="search-box-demo-2" class="demo-canvas demo-canvas--2"> <div id="search-box-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><SearchBox size="sm" label="Search stations" name="station-search" value="sample-2" placeholder="Name, district, or jurisdiction" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div> <div class="demo-render"><SearchBox size="sm" label="Search stations" name="station-search" value="sample-2" placeholder="Name, district, or jurisdiction" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
</div> </div>
<section class="demo-code" aria-label="Compact directory search usage"> <section class="demo-code" aria-label="Compact directory search usage">
@@ -109,7 +109,7 @@ page SearchBoxDetail {
<div class="demo-workbench"> <div class="demo-workbench">
<div id="search-box-demo-3" class="demo-canvas demo-canvas--3"> <div id="search-box-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div> <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><SearchBox size="lg" color="info" label="Complaint reference" name="complaint-reference" value="sample-3" placeholder="Enter reference number" disabled="false" required="true" class="showcase-instance showcase-instance--3" /></div> <div class="demo-render"><SearchBox size="lg" color="info" label="Complaint reference" name="complaint-reference" value="sample-3" placeholder="Enter reference number" disabled="false" required="true" class="showcase-instance showcase-instance--3" /></div>
</div> </div>
<section class="demo-code" aria-label="Required service lookup usage"> <section class="demo-code" aria-label="Required service lookup usage">
Loaded 100 of 171 files, more files were not shown because too many files have changed in this diff. Show more