release: WRNexusJS 0.5.14
This commit is contained in:
@@ -34,11 +34,15 @@ layout Showcase {
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/base">Base</a>
|
||||
<div><a data-docs-component-link href="/components/accordion"><span data-docs-component-name>Accordion</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/alert"><span data-docs-component-name>Alert</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar"><span data-docs-component-name>Avatar</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar-group"><span data-docs-component-name>Avatar Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/badge"><span data-docs-component-name>Badge</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/blockquote"><span data-docs-component-name>Blockquote</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button"><span data-docs-component-name>Button</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button-group"><span data-docs-component-name>Button Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/card"><span data-docs-component-name>Card</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/carousel"><span data-docs-component-name>Carousel</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/chat-bubble"><span data-docs-component-name>Chat Bubble</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/collapse"><span data-docs-component-name>Collapse</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/date-picker"><span data-docs-component-name>Date Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/device-frame"><span data-docs-component-name>Device Frame</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-upload-progress"><span data-docs-component-name>File Upload Progress</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/legend-indicator"><span data-docs-component-name>Legend Indicator</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list"><span data-docs-component-name>List</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list-group"><span data-docs-component-name>List Group</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/marquee"><span data-docs-component-name>Marquee</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/progress"><span data-docs-component-name>Progress</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/rating"><span data-docs-component-name>Rating</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/skeleton"><span data-docs-component-name>Skeleton</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/spinner"><span data-docs-component-name>Spinner</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/styled-icon"><span data-docs-component-name>Styled Icon</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/timeline"><span data-docs-component-name>Timeline</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/toast"><span data-docs-component-name>Toast</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tree-view"><span data-docs-component-name>Tree View</span><small data-component-status="pending">Pending</small></a></div>
|
||||
<div><a data-docs-component-link href="/components/accordion"><span data-docs-component-name>Accordion</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/alert"><span data-docs-component-name>Alert</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar"><span data-docs-component-name>Avatar</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar-group"><span data-docs-component-name>Avatar Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/badge"><span data-docs-component-name>Badge</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/blockquote"><span data-docs-component-name>Blockquote</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button"><span data-docs-component-name>Button</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button-group"><span data-docs-component-name>Button Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/card"><span data-docs-component-name>Card</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/carousel"><span data-docs-component-name>Carousel</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/chat-bubble"><span data-docs-component-name>Chat Bubble</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/collapse"><span data-docs-component-name>Collapse</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/date-picker"><span data-docs-component-name>Date Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/device-frame"><span data-docs-component-name>Device Frame</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-upload-progress"><span data-docs-component-name>File Upload Progress</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/hero-actions"><span data-docs-component-name>Hero Actions</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/legend-indicator"><span data-docs-component-name>Legend Indicator</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list"><span data-docs-component-name>List</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list-group"><span data-docs-component-name>List Group</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/marquee"><span data-docs-component-name>Marquee</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/progress"><span data-docs-component-name>Progress</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/rating"><span data-docs-component-name>Rating</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/skeleton"><span data-docs-component-name>Skeleton</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/spinner"><span data-docs-component-name>Spinner</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/styled-icon"><span data-docs-component-name>Styled Icon</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/timeline"><span data-docs-component-name>Timeline</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/toast"><span data-docs-component-name>Toast</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tree-view"><span data-docs-component-name>Tree View</span><small data-component-status="pending">Pending</small></a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/blocks">Blocks</a>
|
||||
<div><a data-docs-component-link href="/components/announcement-bar"><span data-docs-component-name>Announcement Bar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/ctasection"><span data-docs-component-name>CTASection</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-card"><span data-docs-component-name>Feature Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-icon-card"><span data-docs-component-name>Feature Icon Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/hero"><span data-docs-component-name>Hero</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/marketing-section-header"><span data-docs-component-name>Marketing Section Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/metric-card"><span data-docs-component-name>Metric Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/page-header"><span data-docs-component-name>Page Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/portal-dashboard"><span data-docs-component-name>Portal Dashboard</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/split-hero"><span data-docs-component-name>Split Hero</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/stats-bar"><span data-docs-component-name>Stats Bar</span><small data-component-status="pending">Pending</small></a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/forms">Forms</a>
|
||||
<div><a data-docs-component-link href="/components/checkbox"><span data-docs-component-name>Checkbox</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/color-picker"><span data-docs-component-name>Color Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-input"><span data-docs-component-name>File Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input"><span data-docs-component-name>Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input-group"><span data-docs-component-name>Input Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/radio"><span data-docs-component-name>Radio</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/range-slider"><span data-docs-component-name>Range Slider</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/select"><span data-docs-component-name>Select</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/switch"><span data-docs-component-name>Switch</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/textarea"><span data-docs-component-name>Textarea</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/time-picker"><span data-docs-component-name>Time Picker</span><small data-component-status="complete">Complete</small></a></div>
|
||||
<div><a data-docs-component-link href="/components/auth-form"><span data-docs-component-name>Auth Form</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/checkbox"><span data-docs-component-name>Checkbox</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/color-picker"><span data-docs-component-name>Color Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-input"><span data-docs-component-name>File Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input"><span data-docs-component-name>Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input-group"><span data-docs-component-name>Input Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/radio"><span data-docs-component-name>Radio</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/range-slider"><span data-docs-component-name>Range Slider</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/select"><span data-docs-component-name>Select</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/switch"><span data-docs-component-name>Switch</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/textarea"><span data-docs-component-name>Textarea</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/time-picker"><span data-docs-component-name>Time Picker</span><small data-component-status="complete">Complete</small></a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/integrations">Integrations</a>
|
||||
@@ -46,11 +50,11 @@ layout Showcase {
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/layout">Layout</a>
|
||||
<div><a data-docs-component-link href="/components/columns"><span data-docs-component-name>Columns</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/container"><span data-docs-component-name>Container</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/custom-scrollbar"><span data-docs-component-name>Custom Scrollbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/divider"><span data-docs-component-name>Divider</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/grid"><span data-docs-component-name>Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/image"><span data-docs-component-name>Image</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/kbd"><span data-docs-component-name>Kbd</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/layout-splitter"><span data-docs-component-name>Layout Splitter</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/link"><span data-docs-component-name>Link</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/typography"><span data-docs-component-name>Typography</span><small data-component-status="pending">Pending</small></a></div>
|
||||
<div><a data-docs-component-link href="/components/auth-split-layout"><span data-docs-component-name>Auth Split Layout</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/columns"><span data-docs-component-name>Columns</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/container"><span data-docs-component-name>Container</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/custom-scrollbar"><span data-docs-component-name>Custom Scrollbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/divider"><span data-docs-component-name>Divider</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-grid"><span data-docs-component-name>Feature Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/grid"><span data-docs-component-name>Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/image"><span data-docs-component-name>Image</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/kbd"><span data-docs-component-name>Kbd</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/layout-splitter"><span data-docs-component-name>Layout Splitter</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/link"><span data-docs-component-name>Link</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/metric-grid"><span data-docs-component-name>Metric Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/public-page-shell"><span data-docs-component-name>Public Page Shell</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/section"><span data-docs-component-name>Section</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/section-header"><span data-docs-component-name>Section Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/text-link"><span data-docs-component-name>Text Link</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/typography"><span data-docs-component-name>Typography</span><small data-component-status="pending">Pending</small></a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/navigation">Navigation</a>
|
||||
<div><a data-docs-component-link href="/components/breadcrumb"><span data-docs-component-name>Breadcrumb</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/mega-menu"><span data-docs-component-name>Mega Menu</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/nav"><span data-docs-component-name>Nav</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/navbar"><span data-docs-component-name>Navbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/pagination"><span data-docs-component-name>Pagination</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/scrollspy"><span data-docs-component-name>Scrollspy</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/sidebar"><span data-docs-component-name>Sidebar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/stepper"><span data-docs-component-name>Stepper</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tabs"><span data-docs-component-name>Tabs</span><small data-component-status="pending">Pending</small></a></div>
|
||||
<div><a data-docs-component-link href="/components/back-to-top"><span data-docs-component-name>Back To Top</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/breadcrumb"><span data-docs-component-name>Breadcrumb</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/footer"><span data-docs-component-name>Footer</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/mega-menu"><span data-docs-component-name>Mega Menu</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/nav"><span data-docs-component-name>Nav</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/navbar"><span data-docs-component-name>Navbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/pagination"><span data-docs-component-name>Pagination</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/preference-switcher"><span data-docs-component-name>Preference Switcher</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/scrollspy"><span data-docs-component-name>Scrollspy</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/sidebar"><span data-docs-component-name>Sidebar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/stepper"><span data-docs-component-name>Stepper</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tabs"><span data-docs-component-name>Tabs</span><small data-component-status="pending">Pending</small></a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/overlays">Overlays</a>
|
||||
|
||||
@@ -3,14 +3,14 @@ page BaseShowcase {
|
||||
layout = "showcase"
|
||||
seo {
|
||||
title = "Base components"
|
||||
description = "27 base components from @wrnexus/ui."
|
||||
description = "28 base components from @wrnexus/ui."
|
||||
}
|
||||
view {
|
||||
<header class="showcase-hero showcase-hero--category">
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Base</h1>
|
||||
<p class="showcase-description">27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>27 components</span><span>Multiple use cases</span><span>169 live configurations</span></div>
|
||||
<p class="showcase-description">28 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>28 components</span><span>Multiple use cases</span><span>172 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card">
|
||||
@@ -163,6 +163,16 @@ page BaseShowcase {
|
||||
<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>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="HeroActions" actions="[{"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":[{"label":"Nested option A","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-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":[{"label":"Nested option A","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" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1"></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Base</span><h2>Hero Actions</h2><p>Responsive action group for hero and call-to-action sections.</p></div>
|
||||
<div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/hero-actions">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,141 @@
|
||||
// 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"
|
||||
state playground_showName = ctx.url.searchParams.get("pg_showName") ?? "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 authentication form for sign-in, registration, recovery, reset, and MFA."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/forms">Forms</a><span aria-hidden="true">/</span><span>Auth Form</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Forms component</span>
|
||||
<h1>Auth Form</h1>
|
||||
<p>Reusable authentication form for sign-in, registration, recovery, reset, and MFA.</p>
|
||||
<div class="detail-badges"><span>13 props</span><span>1 slots</span><span>5 events</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">
|
||||
<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><div data-component="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></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><AuthForm
|
||||
action="#auth-form-demo"
|
||||
title="Auth Form example"
|
||||
description="A polished default auth form for a modern application."
|
||||
submitLabel="Auth Form"
|
||||
/></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>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><select id="playground-auth-form-mode" name="pg_mode"><option value="sign-in" selected>sign-in</option><option value="register">register</option><option value="recover">recover</option><option value="reset">reset</option><option value="mfa">mfa</option></select></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"><div data-component="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>
|
||||
</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><AuthForm
|
||||
action="#auth-form-demo"
|
||||
title="Auth Form example"
|
||||
description="A polished default auth form for a modern application."
|
||||
submitLabel="Auth Form"
|
||||
/></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"><div data-component="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>
|
||||
</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><AuthForm
|
||||
size="sm"
|
||||
action="#auth-form-demo"
|
||||
title="Compact Auth Form"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
submitLabel="Compact example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="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"><div data-component="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>
|
||||
</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><AuthForm
|
||||
size="lg"
|
||||
action="#auth-form-demo"
|
||||
title="Advanced Auth Form"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
submitLabel="Advanced example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 submits its value.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('submit', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></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">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/checkbox"><small>Next</small><strong>Checkbox →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,257 @@
|
||||
// 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 = ctx.url.searchParams.get("pg_features") ?? "[\n {\n \"label\": \"Team members\",\n \"values\": [\n \"5\",\n \"Unlimited\",\n \"Unlimited\"\n ]\n },\n {\n \"label\": \"Support\",\n \"values\": [\n \"Email\",\n \"Priority\",\n \"Dedicated\"\n ]\n },\n {\n \"label\": \"Audit history\",\n \"values\": [\n \"7 days\",\n \"90 days\",\n \"Custom\"\n ]\n }\n]"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Auth Split Layout"
|
||||
description = "Responsive 50/50 authentication layout with content and form regions."
|
||||
}
|
||||
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>Auth Split Layout</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Auth Split Layout</h1>
|
||||
<p>Responsive 50/50 authentication layout with content and form regions.</p>
|
||||
<div class="detail-badges"><span>8 props</span><span>2 slots</span><span>0 events</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">
|
||||
<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><div data-component="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 slot="aside-extra" class="showcase-slot">aside-extra slot</div><div slot="form" class="showcase-slot">form slot</div></div></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><AuthSplitLayout
|
||||
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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add aside-extra, form slot content here -->
|
||||
</AuthSplitLayout></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>string</small></span><textarea id="playground-auth-split-layout-features" name="pg_features" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"label": "Team members",
|
||||
"values": [
|
||||
"5",
|
||||
"Unlimited",
|
||||
"Unlimited"
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Support",
|
||||
"values": [
|
||||
"Email",
|
||||
"Priority",
|
||||
"Dedicated"
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "Audit history",
|
||||
"values": [
|
||||
"7 days",
|
||||
"90 days",
|
||||
"Custom"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-auth-split-layout-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-split-layout-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</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"><div data-component="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 slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></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><AuthSplitLayout
|
||||
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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add aside-extra, form slot content here -->
|
||||
</AuthSplitLayout></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"><div data-component="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 slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></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><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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add aside-extra, form slot content here -->
|
||||
</AuthSplitLayout></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"><div data-component="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 slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></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><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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add aside-extra, form slot content here -->
|
||||
</AuthSplitLayout></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>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="#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="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/columns"><small>Next</small><strong>Columns →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page BackToTopDetail {
|
||||
layout = "showcase"
|
||||
state playground_threshold = ctx.url.searchParams.get("pg_threshold") ?? "500"
|
||||
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_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||
state playground_position = ctx.url.searchParams.get("pg_position") ?? "right"
|
||||
state playground_offset = ctx.url.searchParams.get("pg_offset") ?? "md"
|
||||
state playground_behavior = ctx.url.searchParams.get("pg_behavior") ?? "smooth"
|
||||
state playground_showProgress = ctx.url.searchParams.get("pg_showProgress") ?? "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") ?? "solid"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Back To Top"
|
||||
description = "Accessible scroll-to-top control with visibility threshold."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Back To Top</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Back To Top</h1>
|
||||
<p>Accessible scroll-to-top control with visibility threshold.</p>
|
||||
<div class="detail-badges"><span>12 props</span><span>0 slots</span><span>0 events</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="BackToTop" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Back To Top</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><div data-component="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}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}"></div></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><BackToTop
|
||||
label="Back To Top"
|
||||
ariaLabel="Back To Top 1 example"
|
||||
showProgress="true"
|
||||
/></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-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="top">top</option><option value="bottom">bottom</option><option value="left">left</option><option value="start">start</option><option value="end">end</option><option value="center">center</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><input id="playground-back-to-top-behavior" name="pg_behavior" type="text" value="smooth" /></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-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="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-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="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="soft">soft</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>
|
||||
</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="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-render"><div data-component="BackToTop" threshold="500" label="Back To Top" ariaLabel="Back To Top 1 example" icon="" showProgress="true" size="default" variant="solid" class="showcase-instance showcase-instance--1"></div></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><BackToTop
|
||||
label="Back To Top"
|
||||
ariaLabel="Back To Top 1 example"
|
||||
showProgress="true"
|
||||
/></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="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-render"><div data-component="BackToTop" threshold="500" label="Compact example" ariaLabel="Back To Top 2 example" icon="icon-[lucide--arrow-right]" showProgress="true" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></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><BackToTop
|
||||
label="Compact example"
|
||||
ariaLabel="Back To Top 2 example"
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
showProgress="true"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
/></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="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-render"><div data-component="BackToTop" threshold="500" label="Advanced example" ariaLabel="Back To Top 3 example" icon="icon-[lucide--trash-2]" showProgress="true" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></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><BackToTop
|
||||
label="Advanced example"
|
||||
ariaLabel="Back To Top 3 example"
|
||||
icon="icon-[lucide--trash-2]"
|
||||
showProgress="true"
|
||||
size="lg"
|
||||
variant="success"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>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>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="#back-to-top-demo-1">Production default</a><a href="#back-to-top-demo-2">Compact application</a><a href="#back-to-top-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/breadcrumb"><small>Next</small><strong>Breadcrumb →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -653,8 +653,8 @@ component.addEventListener('navigate', (event) => {
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/mega-menu"><small>Next</small><strong>Mega Menu →</strong></a>
|
||||
<a href="/components/back-to-top"><small>Previous</small><strong>← Back To Top</strong></a>
|
||||
<a href="/components/footer"><small>Next</small><strong>Footer →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -41,11 +41,11 @@ page CheckboxDetail {
|
||||
<span class="showcase-eyebrow">Forms component</span>
|
||||
<h1>Checkbox</h1>
|
||||
<p>Theme-aware, responsive checkbox component.</p>
|
||||
<div class="detail-badges"><span>27 props</span><span>0 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>27 props</span><span>1 slots</span><span>5 events</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="Checkbox" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Checkbox" data-playground-public-tag="true" data-playground-has-slot="true">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Checkbox</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
@@ -518,7 +518,7 @@ component.addEventListener('input', (event) => {
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/auth-form"><small>Previous</small><strong>← Auth Form</strong></a>
|
||||
<a href="/components/color-picker"><small>Next</small><strong>Color Picker →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ page ColumnsDetail {
|
||||
</div>
|
||||
<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>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-columns-size"><span><strong>size</strong><small>string</small></span><select id="playground-columns-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-columns-color"><span><strong>color</strong><small>string</small></span><select id="playground-columns-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-columns-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-columns-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-columns-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-columns-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-columns-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-columns-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-columns-class"><span><strong>class</strong><small>string</small></span><input id="playground-columns-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-columns-size"><span><strong>size</strong><small>string</small></span><select id="playground-columns-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-columns-color"><span><strong>color</strong><small>string</small></span><select id="playground-columns-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-columns-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-columns-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-columns-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-columns-gap" name="pg_gap"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-columns-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-columns-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-columns-class"><span><strong>class</strong><small>string</small></span><input id="playground-columns-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -105,7 +105,7 @@ page ColumnsDetail {
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/auth-split-layout"><small>Previous</small><strong>← Auth Split Layout</strong></a>
|
||||
<a href="/components/container"><small>Next</small><strong>Container →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -40,7 +40,7 @@ page ContainerDetail {
|
||||
</div>
|
||||
<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>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-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-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-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-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-container-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-container-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-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><option value="compact">compact</option><option value="comfortable">comfortable</option><option value="spacious">spacious</option></select></label><label class="playground-field" for="playground-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-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-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-container-gap" name="pg_gap"><option value="md" selected>md</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-container-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</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-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -111,7 +111,7 @@ page DividerDetail {
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/custom-scrollbar"><small>Previous</small><strong>← Custom Scrollbar</strong></a>
|
||||
<a href="/components/grid"><small>Next</small><strong>Grid →</strong></a>
|
||||
<a href="/components/feature-grid"><small>Next</small><strong>Feature Grid →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,11 +3,9 @@ page DropdownDetail {
|
||||
layout = "showcase"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Dropdown example"
|
||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default dropdown for a modern application."
|
||||
state playground_open = ctx.url.searchParams.get("pg_open") ?? "true"
|
||||
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
|
||||
state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Dropdown"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Dropdown"
|
||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"dropdown-0-1\",\n \"key\": \"dropdown-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#dropdown-demo\",\n \"actionHref\": \"#dropdown-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"dropdown-0-2\",\n \"key\": \"dropdown-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#dropdown-demo\",\n \"actionHref\": \"#dropdown-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
||||
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "end"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Dropdown"
|
||||
@@ -22,7 +20,7 @@ page DropdownDetail {
|
||||
<span class="showcase-eyebrow">Overlays component</span>
|
||||
<h1>Dropdown</h1>
|
||||
<p>Theme-aware, responsive dropdown component.</p>
|
||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>6 props</span><span>3 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
@@ -31,21 +29,234 @@ page DropdownDetail {
|
||||
<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><div data-component="Dropdown" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" open="{playground_open}" placement="{playground_placement}" closeLabel="{playground_closeLabel}" class="{playground_class}"></div></div>
|
||||
<div class="playground-preview-source" data-playground-preview><div data-component="Dropdown" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" placement="{playground_placement}" class="{playground_class}"><div slot="trigger" class="showcase-slot">trigger slot</div><div slot="header" class="showcase-slot">header slot</div><div slot="footer" class="showcase-slot">footer slot</div></div></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><Dropdown
|
||||
title="Dropdown example"
|
||||
description="A polished default dropdown for a modern application."
|
||||
open="true"
|
||||
closeLabel="Dropdown"
|
||||
/></code></pre>
|
||||
label="Dropdown"
|
||||
items='[
|
||||
{
|
||||
"id": "dropdown-0-1",
|
||||
"key": "dropdown-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": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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": "dropdown-0-2",
|
||||
"key": "dropdown-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add trigger, header, footer slot content here -->
|
||||
</Dropdown></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-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="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-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-title"><span><strong>title</strong><small>string</small></span><input id="playground-dropdown-title" name="pg_title" type="text" value="Dropdown example" /></label><label class="playground-field" for="playground-dropdown-description"><span><strong>description</strong><small>string</small></span><input id="playground-dropdown-description" name="pg_description" type="text" value="A polished default dropdown for a modern application." /></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" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-dropdown-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-dropdown-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-dropdown-closeLabel" name="pg_closeLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-class"><span><strong>class</strong><small>string</small></span><input id="playground-dropdown-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<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>
|
||||
<div class="playground-fields"><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="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-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-label"><span><strong>label</strong><small>string</small></span><input id="playground-dropdown-label" name="pg_label" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "dropdown-0-1",
|
||||
"key": "dropdown-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": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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": "dropdown-0-2",
|
||||
"key": "dropdown-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-dropdown-placement" name="pg_placement" type="text" value="end" /></label><label class="playground-field" for="playground-dropdown-class"><span><strong>class</strong><small>string</small></span><input id="playground-dropdown-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -60,16 +271,122 @@ page DropdownDetail {
|
||||
<div class="demo-workbench">
|
||||
<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-render"><div data-component="Dropdown" size="default" title="Dropdown example" description="A polished default dropdown for a modern application." open="true" closeLabel="Dropdown" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="demo-render"><div data-component="Dropdown" size="default" label="Dropdown" items="[{"id":"dropdown-0-1","key":"dropdown-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":"#dropdown-demo","actionHref":"#dropdown-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":"dropdown-0-2","key":"dropdown-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#dropdown-demo","actionHref":"#dropdown-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 slot="trigger" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trigger slot</span></div><div slot="header" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>header slot</span></div><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><Dropdown
|
||||
title="Dropdown example"
|
||||
description="A polished default dropdown for a modern application."
|
||||
open="true"
|
||||
closeLabel="Dropdown"
|
||||
/></code></pre>
|
||||
label="Dropdown"
|
||||
items='[
|
||||
{
|
||||
"id": "dropdown-0-1",
|
||||
"key": "dropdown-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": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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": "dropdown-0-2",
|
||||
"key": "dropdown-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add trigger, header, footer slot content here -->
|
||||
</Dropdown></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
@@ -81,17 +398,123 @@ page DropdownDetail {
|
||||
<div class="demo-workbench">
|
||||
<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-render"><div data-component="Dropdown" size="sm" title="Compact Dropdown" description="A compact configuration for dashboards and dense product surfaces." open="true" closeLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
|
||||
<div class="demo-render"><div data-component="Dropdown" size="sm" label="Compact example" items="[{"id":"dropdown-1-1","key":"dropdown-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":"#dropdown-demo","actionHref":"#dropdown-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":"dropdown-1-2","key":"dropdown-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#dropdown-demo","actionHref":"#dropdown-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--2"><div slot="trigger" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trigger slot</span></div><div slot="header" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>header slot</span></div><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><Dropdown
|
||||
size="sm"
|
||||
title="Compact Dropdown"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
open="true"
|
||||
closeLabel="Compact example"
|
||||
/></code></pre>
|
||||
label="Compact example"
|
||||
items='[
|
||||
{
|
||||
"id": "dropdown-1-1",
|
||||
"key": "dropdown-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": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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": "dropdown-1-2",
|
||||
"key": "dropdown-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add trigger, header, footer slot content here -->
|
||||
</Dropdown></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
@@ -103,26 +526,132 @@ page DropdownDetail {
|
||||
<div class="demo-workbench">
|
||||
<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-render"><div data-component="Dropdown" size="lg" title="Advanced Dropdown" description="A richer configuration demonstrating additional content and hierarchy." open="true" closeLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
|
||||
<div class="demo-render"><div data-component="Dropdown" size="lg" label="Advanced example" items="[{"id":"dropdown-2-1","key":"dropdown-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":"#dropdown-demo","actionHref":"#dropdown-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":"dropdown-2-2","key":"dropdown-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":"#dropdown-demo","actionHref":"#dropdown-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" class="showcase-instance showcase-instance--3"><div slot="trigger" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trigger slot</span></div><div slot="header" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>header slot</span></div><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><Dropdown
|
||||
size="lg"
|
||||
title="Advanced Dropdown"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
open="true"
|
||||
closeLabel="Advanced example"
|
||||
/></code></pre>
|
||||
label="Advanced example"
|
||||
items='[
|
||||
{
|
||||
"id": "dropdown-2-1",
|
||||
"key": "dropdown-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": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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": "dropdown-2-2",
|
||||
"key": "dropdown-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": "#dropdown-demo",
|
||||
"actionHref": "#dropdown-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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add trigger, header, footer slot content here -->
|
||||
</Dropdown></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('open', (event) => {
|
||||
component.addEventListener('toggle', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></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>"Dropdown"</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>open</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>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</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>"Open menu"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"end"</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="#dropdown-demo-1">Production default</a><a href="#dropdown-demo-2">Compact application</a><a href="#dropdown-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
// 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_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_href = ctx.url.searchParams.get("pg_href") ?? "#feature-card-demo"
|
||||
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Feature Card"
|
||||
state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
|
||||
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"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Feature Card"
|
||||
description = "Reusable linked feature or service card with icon, badge, description, and action."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Feature Card</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Blocks component</span>
|
||||
<h1>Feature Card</h1>
|
||||
<p>Reusable linked feature or service card with icon, badge, description, and action.</p>
|
||||
<div class="detail-badges"><span>15 props</span><span>3 slots</span><span>0 events</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">
|
||||
<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><div data-component="FeatureCard" icon="{playground_icon}" title="{playground_title}" description="{playground_description}" href="{playground_href}" actionLabel="{playground_actionLabel}" actionIcon="{playground_actionIcon}" 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 slot="icon" class="showcase-slot">icon slot</div><div slot="footer" class="showcase-slot">footer slot</div></div></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><FeatureCard
|
||||
title="Feature Card example"
|
||||
description="A polished default feature card for a modern application."
|
||||
href="#feature-card-demo"
|
||||
actionLabel="Feature Card"
|
||||
align="start">
|
||||
<!-- Add icon, default, footer slot content here -->
|
||||
</FeatureCard></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>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-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-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-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-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-field" for="playground-feature-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-feature-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-badgeColor"><span><strong>badge Color</strong><small>string</small></span><input id="playground-feature-card-badgeColor" name="pg_badgeColor" type="text" value="primary" /></label><label class="playground-field" for="playground-feature-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-card-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-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-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-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-feature-card-hover"><span><strong>hover</strong><small>string</small></span><select id="playground-feature-card-hover" name="pg_hover"><option value="lift" selected>lift</option><option value="shadow">shadow</option><option value="border">border</option></select></label><label class="playground-field" for="playground-feature-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-card-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="end">end</option><option value="right">right</option></select></label><label class="playground-toggle" for="playground-feature-card-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-feature-card-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-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>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="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"><div data-component="FeatureCard" icon="" title="Feature Card example" description="A polished default feature card for a modern application." href="#feature-card-demo" actionLabel="Feature Card" size="default" variant="default" align="start" disabled="false" class="showcase-instance showcase-instance--1"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><FeatureCard
|
||||
title="Feature Card example"
|
||||
description="A polished default feature card for a modern application."
|
||||
href="#feature-card-demo"
|
||||
actionLabel="Feature Card"
|
||||
align="start">
|
||||
<!-- Add icon, default, footer slot content here -->
|
||||
</FeatureCard></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="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"><div data-component="FeatureCard" icon="icon-[lucide--arrow-right]" title="Compact Feature Card" description="A compact configuration for dashboards and dense product surfaces." href="#feature-card-demo" actionLabel="Compact example" size="sm" variant="secondary" align="center" disabled="false" class="showcase-instance showcase-instance--2"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><FeatureCard
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
title="Compact Feature Card"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
href="#feature-card-demo"
|
||||
actionLabel="Compact example"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
align="center">
|
||||
<!-- Add icon, default, footer slot content here -->
|
||||
</FeatureCard></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="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"><div data-component="FeatureCard" icon="icon-[lucide--trash-2]" title="Advanced Feature Card" description="A richer configuration demonstrating additional content and hierarchy." href="#feature-card-demo" actionLabel="Advanced example" size="lg" variant="success" align="end" disabled="false" class="showcase-instance showcase-instance--3"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><FeatureCard
|
||||
icon="icon-[lucide--trash-2]"
|
||||
title="Advanced Feature Card"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
href="#feature-card-demo"
|
||||
actionLabel="Advanced example"
|
||||
size="lg"
|
||||
variant="success"
|
||||
align="end">
|
||||
<!-- Add icon, default, footer slot content here -->
|
||||
</FeatureCard></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>icon</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>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>"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>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">Production default</a><a href="#feature-card-demo-2">Compact application</a><a href="#feature-card-demo-3">Rich configuration</a><a href="#events">Events</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>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page FeatureGridDetail {
|
||||
layout = "showcase"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
|
||||
state playground_tabletColumns = ctx.url.searchParams.get("pg_tabletColumns") ?? "2"
|
||||
state playground_mobileColumns = 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"
|
||||
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
|
||||
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Feature Grid"
|
||||
description = "Responsive equal-height grid for feature and service cards."
|
||||
}
|
||||
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>Responsive equal-height grid for feature and service cards.</p>
|
||||
<div class="detail-badges"><span>11 props</span><span>1 slots</span><span>0 events</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">
|
||||
<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><div data-component="FeatureGrid" color="{playground_color}" size="{playground_size}" columns="{playground_columns}" tabletColumns="{playground_tabletColumns}" mobileColumns="{playground_mobileColumns}" gap="{playground_gap}" minItemWidth="{playground_minItemWidth}" equalHeight="{playground_equalHeight}" align="{playground_align}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></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><FeatureGrid
|
||||
align="start"
|
||||
/></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>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-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-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-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="sm">sm</option><option value="lg">lg</option><option value="xl">xl</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></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="lg">lg</option><option value="xl">xl</option></select></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>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="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"><div data-component="FeatureGrid" size="default" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="start" class="showcase-instance showcase-instance--1"></div></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><FeatureGrid
|
||||
align="start"
|
||||
/></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="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"><div data-component="FeatureGrid" size="sm" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="center" class="showcase-instance showcase-instance--2"></div></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><FeatureGrid
|
||||
size="sm"
|
||||
align="center"
|
||||
/></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="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"><div data-component="FeatureGrid" size="lg" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="end" class="showcase-instance showcase-instance--3"></div></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><FeatureGrid
|
||||
size="lg"
|
||||
align="end"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>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">Production default</a><a href="#feature-grid-demo-2">Compact application</a><a href="#feature-grid-demo-3">Rich configuration</a><a href="#events">Events</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/grid"><small>Next</small><strong>Grid →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
// 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 = "Feature card with a prominent themed icon treatment."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</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">Blocks component</span>
|
||||
<h1>Feature Icon Card</h1>
|
||||
<p>Feature card with a prominent themed icon treatment.</p>
|
||||
<div class="detail-badges"><span>14 props</span><span>2 slots</span><span>0 events</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">
|
||||
<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><div data-component="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 slot="footer" class="showcase-slot">footer slot</div></div></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><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">
|
||||
<!-- Add default, footer slot content here -->
|
||||
</FeatureIconCard></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><input id="playground-feature-icon-card-iconVariant" name="pg_iconVariant" type="text" value="soft" /></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="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="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="soft">soft</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="end">end</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="shadow">shadow</option><option value="border">border</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>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="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"><div data-component="FeatureIconCard" icon="" 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" size="default" variant="default" align="start" class="showcase-instance showcase-instance--1"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><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">
|
||||
<!-- Add default, footer slot content here -->
|
||||
</FeatureIconCard></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="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"><div data-component="FeatureIconCard" icon="icon-[lucide--arrow-right]" title="Compact Feature Icon Card" description="A compact configuration for dashboards and dense product surfaces." href="#feature-icon-card-demo" actionLabel="Compact example" size="sm" variant="secondary" align="center" class="showcase-instance showcase-instance--2"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><FeatureIconCard
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
title="Compact Feature Icon Card"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
href="#feature-icon-card-demo"
|
||||
actionLabel="Compact example"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
align="center">
|
||||
<!-- Add default, footer slot content here -->
|
||||
</FeatureIconCard></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="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"><div data-component="FeatureIconCard" icon="icon-[lucide--trash-2]" title="Advanced Feature Icon Card" description="A richer configuration demonstrating additional content and hierarchy." href="#feature-icon-card-demo" actionLabel="Advanced example" size="lg" variant="success" align="end" class="showcase-instance showcase-instance--3"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></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><FeatureIconCard
|
||||
icon="icon-[lucide--trash-2]"
|
||||
title="Advanced Feature Icon Card"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
href="#feature-icon-card-demo"
|
||||
actionLabel="Advanced example"
|
||||
size="lg"
|
||||
variant="success"
|
||||
align="end">
|
||||
<!-- Add default, footer slot content here -->
|
||||
</FeatureIconCard></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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">Production default</a><a href="#feature-icon-card-demo-2">Compact application</a><a href="#feature-icon-card-demo-3">Rich configuration</a><a href="#events">Events</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>
|
||||
}
|
||||
}
|
||||
@@ -225,7 +225,7 @@ component.addEventListener('cancel', (event) => {
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/device-frame"><small>Previous</small><strong>← Device Frame</strong></a>
|
||||
<a href="/components/legend-indicator"><small>Next</small><strong>Legend Indicator →</strong></a>
|
||||
<a href="/components/hero-actions"><small>Next</small><strong>Hero Actions →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,667 @@
|
||||
// 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 = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"footer-0-1\",\n \"key\": \"footer-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#footer-demo\",\n \"actionHref\": \"#footer-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"footer-0-2\",\n \"key\": \"footer-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#footer-demo\",\n \"actionHref\": \"#footer-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
||||
state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
|
||||
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "compact"
|
||||
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 = "Responsive application footer with structured links and pre/post content slots."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Footer</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Footer</h1>
|
||||
<p>Responsive application footer with structured links and pre/post content slots.</p>
|
||||
<div class="detail-badges"><span>8 props</span><span>4 slots</span><span>2 events</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">
|
||||
<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><div data-component="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 slot="pre-footer" class="showcase-slot">pre-footer slot</div><div slot="post-footer" class="showcase-slot">post-footer slot</div><div slot="copyright-left" class="showcase-slot">copyright-left slot</div><div slot="copyright-right" class="showcase-slot">copyright-right slot</div></div></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><Footer
|
||||
label="Footer"
|
||||
items='[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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": "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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here -->
|
||||
</Footer></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-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="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>string</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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": "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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-footer-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-footer-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-footer-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-footer-maxWidth" name="pg_maxWidth" type="text" value="compact" /></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>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="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"><div data-component="Footer" size="default" label="Footer" items="[{"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":[{"label":"Nested option A","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":"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":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" columns="3" class="showcase-instance showcase-instance--1"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></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><Footer
|
||||
label="Footer"
|
||||
items='[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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": "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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here -->
|
||||
</Footer></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="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"><div data-component="Footer" size="sm" label="Compact example" items="[{"id":"footer-1-1","key":"footer-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":"#footer-demo","actionHref":"#footer-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":"footer-1-2","key":"footer-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#footer-demo","actionHref":"#footer-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"]}]" columns="3" class="showcase-instance showcase-instance--2"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></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><Footer
|
||||
size="sm"
|
||||
label="Compact example"
|
||||
items='[
|
||||
{
|
||||
"id": "footer-1-1",
|
||||
"key": "footer-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": "#footer-demo",
|
||||
"actionHref": "#footer-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": "footer-1-2",
|
||||
"key": "footer-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#footer-demo",
|
||||
"actionHref": "#footer-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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here -->
|
||||
</Footer></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="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"><div data-component="Footer" size="lg" label="Advanced example" items="[{"id":"footer-2-1","key":"footer-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":"#footer-demo","actionHref":"#footer-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":"footer-2-2","key":"footer-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":"#footer-demo","actionHref":"#footer-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"]}]" columns="3" class="showcase-instance showcase-instance--3"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></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><Footer
|
||||
size="lg"
|
||||
label="Advanced example"
|
||||
items='[
|
||||
{
|
||||
"id": "footer-2-1",
|
||||
"key": "footer-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": "#footer-demo",
|
||||
"actionHref": "#footer-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": "footer-2-2",
|
||||
"key": "footer-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": "#footer-demo",
|
||||
"actionHref": "#footer-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"
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here -->
|
||||
</Footer></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div><div><code>@action</code><span>Fires when the component's action is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('select', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></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>string</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">Production default</a><a href="#footer-demo-2">Compact application</a><a href="#footer-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/breadcrumb"><small>Previous</small><strong>← Breadcrumb</strong></a>
|
||||
<a href="/components/mega-menu"><small>Next</small><strong>Mega Menu →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -38,7 +38,7 @@ page GridDetail {
|
||||
</div>
|
||||
<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>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-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-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-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-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-grid-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-grid-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-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><option value="compact">compact</option></select></label><label class="playground-field" for="playground-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-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-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-grid-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -105,7 +105,7 @@ page GridDetail {
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/divider"><small>Previous</small><strong>← Divider</strong></a>
|
||||
<a href="/components/feature-grid"><small>Previous</small><strong>← Feature Grid</strong></a>
|
||||
<a href="/components/image"><small>Next</small><strong>Image →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,659 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page HeroActionsDetail {
|
||||
layout = "showcase"
|
||||
state playground_actions = ctx.url.searchParams.get("pg_actions") ?? "[\n {\n \"id\": \"hero-actions-0-1\",\n \"key\": \"hero-actions-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#hero-actions-demo\",\n \"actionHref\": \"#hero-actions-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"hero-actions-0-2\",\n \"key\": \"hero-actions-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#hero-actions-demo\",\n \"actionHref\": \"#hero-actions-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
||||
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"
|
||||
state playground_fullWidthMobile = ctx.url.searchParams.get("pg_fullWidthMobile") ?? "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 = "Responsive action group for hero and call-to-action sections."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/base">Base</a><span aria-hidden="true">/</span><span>Hero Actions</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Base component</span>
|
||||
<h1>Hero Actions</h1>
|
||||
<p>Responsive action group for hero and call-to-action sections.</p>
|
||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</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">
|
||||
<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><div data-component="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></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><HeroActions
|
||||
actions='[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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-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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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"
|
||||
/></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>string</small></span><textarea id="playground-hero-actions-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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-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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-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="end">end</option><option value="right">right</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="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-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>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="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"><div data-component="HeroActions" actions="[{"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":[{"label":"Nested option A","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-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":[{"label":"Nested option A","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" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1"></div></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><HeroActions
|
||||
actions='[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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-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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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"
|
||||
/></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="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"><div data-component="HeroActions" actions="[{"id":"hero-actions-1-1","key":"hero-actions-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":"#hero-actions-demo","actionHref":"#hero-actions-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":"hero-actions-1-2","key":"hero-actions-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#hero-actions-demo","actionHref":"#hero-actions-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"]}]" align="center" stackOnMobile="true" fullWidthMobile="true" size="sm" class="showcase-instance showcase-instance--2"></div></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><HeroActions
|
||||
actions='[
|
||||
{
|
||||
"id": "hero-actions-1-1",
|
||||
"key": "hero-actions-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": "#hero-actions-demo",
|
||||
"actionHref": "#hero-actions-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": "hero-actions-1-2",
|
||||
"key": "hero-actions-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#hero-actions-demo",
|
||||
"actionHref": "#hero-actions-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"
|
||||
]
|
||||
}
|
||||
]'
|
||||
align="center"
|
||||
size="sm"
|
||||
/></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="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"><div data-component="HeroActions" actions="[{"id":"hero-actions-2-1","key":"hero-actions-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":"#hero-actions-demo","actionHref":"#hero-actions-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":"hero-actions-2-2","key":"hero-actions-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":"#hero-actions-demo","actionHref":"#hero-actions-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"]}]" align="end" stackOnMobile="true" fullWidthMobile="true" size="lg" class="showcase-instance showcase-instance--3"></div></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><HeroActions
|
||||
actions='[
|
||||
{
|
||||
"id": "hero-actions-2-1",
|
||||
"key": "hero-actions-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": "#hero-actions-demo",
|
||||
"actionHref": "#hero-actions-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": "hero-actions-2-2",
|
||||
"key": "hero-actions-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": "#hero-actions-demo",
|
||||
"actionHref": "#hero-actions-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"
|
||||
]
|
||||
}
|
||||
]'
|
||||
align="end"
|
||||
size="lg"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>actions</code></td><td>string</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">Production default</a><a href="#hero-actions-demo-2">Compact application</a><a href="#hero-actions-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/file-upload-progress"><small>Previous</small><strong>← File Upload Progress</strong></a>
|
||||
<a href="/components/legend-indicator"><small>Next</small><strong>Legend Indicator →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -23,7 +23,7 @@ page ImageDetail {
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Image</h1>
|
||||
<p>Theme-aware, responsive image component.</p>
|
||||
<div class="detail-badges"><span>9 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>9 props</span><span>1 slots</span><span>0 events</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>
|
||||
@@ -41,7 +41,7 @@ page ImageDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-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-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-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-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><input id="playground-image-width" name="pg_width" type="text" value="" /></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-image-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-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><option value="square">square</option><option value="video">video</option><option value="landscape">landscape</option><option value="portrait">portrait</option></select></label><label class="playground-field" for="playground-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-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-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><input id="playground-image-width" name="pg_width" type="text" value="" /></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-image-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -100,11 +100,7 @@ page ImageDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('load', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>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>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -661,7 +661,7 @@ component.addEventListener('toggle', (event) => {
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/file-upload-progress"><small>Previous</small><strong>← File Upload Progress</strong></a>
|
||||
<a href="/components/hero-actions"><small>Previous</small><strong>← Hero Actions</strong></a>
|
||||
<a href="/components/list"><small>Next</small><strong>List →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ page LinkDetail {
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Link</h1>
|
||||
<p>Theme-aware, responsive link component.</p>
|
||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</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>
|
||||
@@ -42,7 +42,7 @@ page LinkDetail {
|
||||
</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-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-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-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-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-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-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-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-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-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-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><option value="neutral">neutral</option></select></label><label class="playground-field" for="playground-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-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-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -107,11 +107,7 @@ page LinkDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('click', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>"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>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>
|
||||
<aside class="detail-aside">
|
||||
@@ -120,7 +116,7 @@ component.addEventListener('click', (event) => {
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/layout-splitter"><small>Previous</small><strong>← Layout Splitter</strong></a>
|
||||
<a href="/components/typography"><small>Next</small><strong>Typography →</strong></a>
|
||||
<a href="/components/metric-grid"><small>Next</small><strong>Metric Grid →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ page ListDetail {
|
||||
<span class="showcase-eyebrow">Base component</span>
|
||||
<h1>List</h1>
|
||||
<p>Theme-aware, responsive list component.</p>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</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>
|
||||
@@ -257,7 +257,7 @@ page ListDetail {
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-list-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="divided">divided</option><option value="card">card</option><option value="separated">separated</option></select></label><label class="playground-field" for="playground-list-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -649,11 +649,7 @@ page ListDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('select', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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"</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>string</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>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -21,7 +21,7 @@ page MapDetail {
|
||||
<span class="showcase-eyebrow">Integrations component</span>
|
||||
<h1>Map</h1>
|
||||
<p>Theme-aware, responsive map component.</p>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</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>
|
||||
@@ -649,11 +649,7 @@ page MapDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@ready</code><span>Fires when the component emits the ready event.</span></div><div><code>@move</code><span>Fires when the component emits the move event.</span></div><div><code>@zoom</code><span>Fires when the component emits the zoom event.</span></div><div><code>@markerClick</code><span>Fires when the component emits the marker Click event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('ready', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>string</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>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
// 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"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Marketing Section Header"
|
||||
description = "Marketing section heading with an optional linked action."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</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">Blocks component</span>
|
||||
<h1>Marketing Section Header</h1>
|
||||
<p>Marketing section heading with an optional linked action.</p>
|
||||
<div class="detail-badges"><span>12 props</span><span>3 slots</span><span>0 events</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">
|
||||
<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><div data-component="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 slot="icon" class="showcase-slot">icon slot</div><div slot="actions" class="showcase-slot">actions slot</div></div></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><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">
|
||||
<!-- Add icon, actions, default slot content here -->
|
||||
</MarketingSectionHeader></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="center">center</option><option value="end">end</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="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>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="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"><div data-component="MarketingSectionHeader" title="Marketing Section Header example" description="A polished default marketing section header for a modern application." align="start" size="default" actionLabel="Marketing Section Header" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--1"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><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">
|
||||
<!-- Add icon, actions, default slot content here -->
|
||||
</MarketingSectionHeader></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="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"><div data-component="MarketingSectionHeader" title="Compact Marketing Section Header" description="A compact configuration for dashboards and dense product surfaces." align="center" size="sm" actionLabel="Compact example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--2"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><MarketingSectionHeader
|
||||
title="Compact Marketing Section Header"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
align="center"
|
||||
size="sm"
|
||||
actionLabel="Compact example"
|
||||
actionHref="#marketing-section-header-demo">
|
||||
<!-- Add icon, actions, default slot content here -->
|
||||
</MarketingSectionHeader></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="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"><div data-component="MarketingSectionHeader" title="Advanced Marketing Section Header" description="A richer configuration demonstrating additional content and hierarchy." align="end" size="lg" actionLabel="Advanced example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--3"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><MarketingSectionHeader
|
||||
title="Advanced Marketing Section Header"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
align="end"
|
||||
size="lg"
|
||||
actionLabel="Advanced example"
|
||||
actionHref="#marketing-section-header-demo">
|
||||
<!-- Add icon, actions, default slot content here -->
|
||||
</MarketingSectionHeader></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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">Production default</a><a href="#marketing-section-header-demo-2">Compact application</a><a href="#marketing-section-header-demo-3">Rich configuration</a><a href="#events">Events</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/metric-card"><small>Next</small><strong>Metric Card →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,7 @@ page MarqueeDetail {
|
||||
<span class="showcase-eyebrow">Base component</span>
|
||||
<h1>Marquee</h1>
|
||||
<p>Theme-aware, responsive marquee component.</p>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</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>
|
||||
@@ -649,11 +649,7 @@ page MarqueeDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@pause</code><span>Fires when the component emits the pause event.</span></div><div><code>@resume</code><span>Fires when the component emits the resume event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('pause', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>"Marquee"</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>string</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>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -653,7 +653,7 @@ component.addEventListener('open', (event) => {
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/breadcrumb"><small>Previous</small><strong>← Breadcrumb</strong></a>
|
||||
<a href="/components/footer"><small>Previous</small><strong>← Footer</strong></a>
|
||||
<a href="/components/nav"><small>Next</small><strong>Nav →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page MetricCardDetail {
|
||||
layout = "showcase"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Metric Card"
|
||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default metric card for a modern application."
|
||||
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||
state playground_prefix = ctx.url.searchParams.get("pg_prefix") ?? ""
|
||||
state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? ""
|
||||
state playground_trend = ctx.url.searchParams.get("pg_trend") ?? ""
|
||||
state playground_trendLabel = ctx.url.searchParams.get("pg_trendLabel") ?? "Metric Card"
|
||||
state playground_trendDirection = ctx.url.searchParams.get("pg_trendDirection") ?? "neutral"
|
||||
state playground_href = ctx.url.searchParams.get("pg_href") ?? "#metric-card-demo"
|
||||
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Metric Card"
|
||||
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_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Metric Card"
|
||||
description = "Single statistic or operational metric with icon, trend, and optional action."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Metric Card</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Blocks component</span>
|
||||
<h1>Metric Card</h1>
|
||||
<p>Single statistic or operational metric with icon, trend, and optional action.</p>
|
||||
<div class="detail-badges"><span>16 props</span><span>0 slots</span><span>0 events</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="MetricCard" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Metric 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><div data-component="MetricCard" label="{playground_label}" value="{playground_value}" description="{playground_description}" icon="{playground_icon}" prefix="{playground_prefix}" suffix="{playground_suffix}" trend="{playground_trend}" trendLabel="{playground_trendLabel}" trendDirection="{playground_trendDirection}" href="{playground_href}" actionLabel="{playground_actionLabel}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" align="{playground_align}" class="{playground_class}"></div></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><MetricCard
|
||||
label="Metric Card"
|
||||
value="sample-1"
|
||||
description="A polished default metric card for a modern application."
|
||||
trendLabel="Metric Card"
|
||||
href="#metric-card-demo"
|
||||
actionLabel="Metric Card"
|
||||
align="start"
|
||||
/></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>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-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-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-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="positive">positive</option><option value="down">down</option><option value="negative">negative</option></select></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-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-size"><span><strong>size</strong><small>string</small></span><select id="playground-metric-card-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-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-metric-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-metric-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-metric-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="soft">soft</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-metric-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-metric-card-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="end">end</option><option value="right">right</option></select></label><label class="playground-field" for="playground-metric-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-metric-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>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="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-render"><div data-component="MetricCard" label="Metric Card" value="sample-1" description="A polished default metric card for a modern application." icon="" trendLabel="Metric Card" href="#metric-card-demo" actionLabel="Metric Card" size="default" variant="default" align="start" class="showcase-instance showcase-instance--1"></div></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><MetricCard
|
||||
label="Metric Card"
|
||||
value="sample-1"
|
||||
description="A polished default metric card for a modern application."
|
||||
trendLabel="Metric Card"
|
||||
href="#metric-card-demo"
|
||||
actionLabel="Metric Card"
|
||||
align="start"
|
||||
/></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="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-render"><div data-component="MetricCard" label="Compact example" value="sample-2" description="A compact configuration for dashboards and dense product surfaces." icon="icon-[lucide--arrow-right]" trendLabel="Compact example" href="#metric-card-demo" actionLabel="Compact example" size="sm" variant="secondary" align="center" class="showcase-instance showcase-instance--2"></div></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><MetricCard
|
||||
label="Compact example"
|
||||
value="sample-2"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
trendLabel="Compact example"
|
||||
href="#metric-card-demo"
|
||||
actionLabel="Compact example"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
align="center"
|
||||
/></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="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-render"><div data-component="MetricCard" label="Advanced example" value="sample-3" description="A richer configuration demonstrating additional content and hierarchy." icon="icon-[lucide--trash-2]" trendLabel="Advanced example" href="#metric-card-demo" actionLabel="Advanced example" size="lg" variant="success" align="end" class="showcase-instance showcase-instance--3"></div></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><MetricCard
|
||||
label="Advanced example"
|
||||
value="sample-3"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
icon="icon-[lucide--trash-2]"
|
||||
trendLabel="Advanced example"
|
||||
href="#metric-card-demo"
|
||||
actionLabel="Advanced example"
|
||||
size="lg"
|
||||
variant="success"
|
||||
align="end"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>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>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>""</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>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-card-demo-1">Production default</a><a href="#metric-card-demo-2">Compact application</a><a href="#metric-card-demo-3">Rich configuration</a><a href="#events">Events</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/page-header"><small>Next</small><strong>Page Header →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,660 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page MetricGridDetail {
|
||||
layout = "showcase"
|
||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"metric-grid-0-1\",\n \"key\": \"metric-grid-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#metric-grid-demo\",\n \"actionHref\": \"#metric-grid-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"metric-grid-0-2\",\n \"key\": \"metric-grid-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#metric-grid-demo\",\n \"actionHref\": \"#metric-grid-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
||||
state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "4"
|
||||
state playground_tabletColumns = ctx.url.searchParams.get("pg_tabletColumns") ?? "2"
|
||||
state playground_mobileColumns = 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"
|
||||
state playground_dividers = ctx.url.searchParams.get("pg_dividers") ?? "false"
|
||||
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 = "Metric Grid"
|
||||
description = "Responsive collection of metric cards."
|
||||
}
|
||||
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>Metric Grid</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Metric Grid</h1>
|
||||
<p>Responsive collection of metric cards.</p>
|
||||
<div class="detail-badges"><span>11 props</span><span>1 slots</span><span>0 events</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">
|
||||
<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><div data-component="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}" class="{playground_class}"></div></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><MetricGrid
|
||||
items='[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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": "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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]'
|
||||
/></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>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-metric-grid-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-metric-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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": "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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-metric-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-metric-grid-columns" name="pg_columns" type="number" value="4" /></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="sm">sm</option><option value="lg">lg</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="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>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="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"><div data-component="MetricGrid" items="[{"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":[{"label":"Nested option A","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":"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":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="default" variant="default" class="showcase-instance showcase-instance--1"></div></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><MetricGrid
|
||||
items='[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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": "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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]'
|
||||
/></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="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"><div data-component="MetricGrid" items="[{"id":"metric-grid-1-1","key":"metric-grid-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":"#metric-grid-demo","actionHref":"#metric-grid-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":"metric-grid-1-2","key":"metric-grid-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#metric-grid-demo","actionHref":"#metric-grid-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"]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></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><MetricGrid
|
||||
items='[
|
||||
{
|
||||
"id": "metric-grid-1-1",
|
||||
"key": "metric-grid-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": "#metric-grid-demo",
|
||||
"actionHref": "#metric-grid-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": "metric-grid-1-2",
|
||||
"key": "metric-grid-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#metric-grid-demo",
|
||||
"actionHref": "#metric-grid-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"
|
||||
/></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="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"><div data-component="MetricGrid" items="[{"id":"metric-grid-2-1","key":"metric-grid-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":"#metric-grid-demo","actionHref":"#metric-grid-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":"metric-grid-2-2","key":"metric-grid-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":"#metric-grid-demo","actionHref":"#metric-grid-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"]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></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><MetricGrid
|
||||
items='[
|
||||
{
|
||||
"id": "metric-grid-2-1",
|
||||
"key": "metric-grid-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": "#metric-grid-demo",
|
||||
"actionHref": "#metric-grid-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": "metric-grid-2-2",
|
||||
"key": "metric-grid-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": "#metric-grid-demo",
|
||||
"actionHref": "#metric-grid-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"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>string</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>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">Production default</a><a href="#metric-grid-demo-2">Compact application</a><a href="#metric-grid-demo-3">Rich configuration</a><a href="#events">Events</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/public-page-shell"><small>Next</small><strong>Public Page Shell →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,706 @@
|
||||
// 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_align = ctx.url.searchParams.get("pg_align") ?? "start"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
|
||||
state playground_showBreadcrumbs = ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true"
|
||||
state playground_breadcrumbs = ctx.url.searchParams.get("pg_breadcrumbs") ?? "[\n {\n \"id\": \"page-header-0-1\",\n \"key\": \"page-header-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#page-header-demo\",\n \"actionHref\": \"#page-header-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"page-header-0-2\",\n \"key\": \"page-header-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#page-header-demo\",\n \"actionHref\": \"#page-header-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
||||
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_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Page Header"
|
||||
description = "Public and application page header with breadcrumbs, metadata, and actions."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Page Header</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Blocks component</span>
|
||||
<h1>Page Header</h1>
|
||||
<p>Public and application page header with breadcrumbs, metadata, and actions.</p>
|
||||
<div class="detail-badges"><span>18 props</span><span>3 slots</span><span>0 events</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">
|
||||
<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><div data-component="PageHeader" eyebrow="{playground_eyebrow}" title="{playground_title}" description="{playground_description}" icon="{playground_icon}" align="{playground_align}" size="{playground_size}" compact="{playground_compact}" showBreadcrumbs="{playground_showBreadcrumbs}" breadcrumbs="{playground_breadcrumbs}" primaryLabel="{playground_primaryLabel}" primaryHref="{playground_primaryHref}" primaryIcon="{playground_primaryIcon}" secondaryLabel="{playground_secondaryLabel}" secondaryHref="{playground_secondaryHref}" secondaryIcon="{playground_secondaryIcon}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}"><div slot="meta" class="showcase-slot">meta slot</div><div slot="actions" class="showcase-slot">actions slot</div></div></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><PageHeader
|
||||
title="Page Header example"
|
||||
description="A polished default page header for a modern application."
|
||||
align="start"
|
||||
showBreadcrumbs="true"
|
||||
breadcrumbs='[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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-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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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="Page Header"
|
||||
primaryHref="#page-header-demo"
|
||||
secondaryLabel="Page Header"
|
||||
secondaryHref="#page-header-demo">
|
||||
<!-- Add meta, actions, default slot content here -->
|
||||
</PageHeader></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>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-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-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="end">end</option></select></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="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><option value="compact">compact</option></select></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-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>string</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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-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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-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="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-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="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>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="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"><div data-component="PageHeader" title="Page Header example" description="A polished default page header for a modern application." icon="" align="start" size="default" compact="false" showBreadcrumbs="true" breadcrumbs="[{"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":[{"label":"Nested option A","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-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":[{"label":"Nested option A","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="Page Header" primaryHref="#page-header-demo" secondaryLabel="Page Header" secondaryHref="#page-header-demo" variant="default" class="showcase-instance showcase-instance--1"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><PageHeader
|
||||
title="Page Header example"
|
||||
description="A polished default page header for a modern application."
|
||||
align="start"
|
||||
showBreadcrumbs="true"
|
||||
breadcrumbs='[
|
||||
{
|
||||
"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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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-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": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"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="Page Header"
|
||||
primaryHref="#page-header-demo"
|
||||
secondaryLabel="Page Header"
|
||||
secondaryHref="#page-header-demo">
|
||||
<!-- Add meta, actions, default slot content here -->
|
||||
</PageHeader></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="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"><div data-component="PageHeader" title="Compact Page Header" description="A compact configuration for dashboards and dense product surfaces." icon="icon-[lucide--arrow-right]" align="center" size="sm" compact="true" 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"]}]" primaryLabel="Compact example" primaryHref="#page-header-demo" secondaryLabel="Compact example" secondaryHref="#page-header-demo" variant="secondary" class="showcase-instance showcase-instance--2"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><PageHeader
|
||||
title="Compact Page Header"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
align="center"
|
||||
size="sm"
|
||||
compact="true"
|
||||
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"
|
||||
]
|
||||
}
|
||||
]'
|
||||
primaryLabel="Compact example"
|
||||
primaryHref="#page-header-demo"
|
||||
secondaryLabel="Compact example"
|
||||
secondaryHref="#page-header-demo"
|
||||
variant="secondary">
|
||||
<!-- Add meta, actions, default slot content here -->
|
||||
</PageHeader></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="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"><div data-component="PageHeader" title="Advanced Page Header" description="A richer configuration demonstrating additional content and hierarchy." icon="icon-[lucide--trash-2]" align="end" size="lg" compact="false" 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"]}]" primaryLabel="Advanced example" primaryHref="#page-header-demo" secondaryLabel="Advanced example" secondaryHref="#page-header-demo" variant="success" class="showcase-instance showcase-instance--3"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><PageHeader
|
||||
title="Advanced Page Header"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
icon="icon-[lucide--trash-2]"
|
||||
align="end"
|
||||
size="lg"
|
||||
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"
|
||||
]
|
||||
}
|
||||
]'
|
||||
primaryLabel="Advanced example"
|
||||
primaryHref="#page-header-demo"
|
||||
secondaryLabel="Advanced example"
|
||||
secondaryHref="#page-header-demo"
|
||||
variant="success">
|
||||
<!-- Add meta, actions, default slot content here -->
|
||||
</PageHeader></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>align</code></td><td>string</td><td><code>"left"</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>compact</code></td><td>boolean</td><td><code>false</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>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>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">Production default</a><a href="#page-header-demo-2">Compact application</a><a href="#page-header-demo-3">Rich configuration</a><a href="#events">Events</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/portal-dashboard"><small>Next</small><strong>Portal Dashboard →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -654,7 +654,7 @@ component.addEventListener('change', (event) => {
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/navbar"><small>Previous</small><strong>← Navbar</strong></a>
|
||||
<a href="/components/scrollspy"><small>Next</small><strong>Scrollspy →</strong></a>
|
||||
<a href="/components/preference-switcher"><small>Next</small><strong>Preference Switcher →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,136 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page PreferenceSwitcherDetail {
|
||||
layout = "showcase"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_themeLabel = ctx.url.searchParams.get("pg_themeLabel") ?? "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_languages = ctx.url.searchParams.get("pg_languages") ?? ""
|
||||
state playground_colors = ctx.url.searchParams.get("pg_colors") ?? ""
|
||||
state playground_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Preference Switcher"
|
||||
description = "Accessible theme, accent color, and language preference controls."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Preference Switcher</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Preference Switcher</h1>
|
||||
<p>Accessible theme, accent color, and language preference controls.</p>
|
||||
<div class="detail-badges"><span>9 props</span><span>0 slots</span><span>3 events</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="PreferenceSwitcher" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Preference Switcher</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><div data-component="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>
|
||||
<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><PreferenceSwitcher
|
||||
themeLabel="Preference Switcher"
|
||||
colorLabel="Preference Switcher"
|
||||
languageLabel="Preference Switcher"
|
||||
compact="false"
|
||||
/></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>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-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>
|
||||
</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="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-render"><div data-component="PreferenceSwitcher" size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" class="showcase-instance showcase-instance--1"></div></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><PreferenceSwitcher
|
||||
themeLabel="Preference Switcher"
|
||||
colorLabel="Preference Switcher"
|
||||
languageLabel="Preference Switcher"
|
||||
compact="false"
|
||||
/></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="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-render"><div data-component="PreferenceSwitcher" size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" class="showcase-instance showcase-instance--2"></div></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><PreferenceSwitcher
|
||||
size="sm"
|
||||
themeLabel="Compact example"
|
||||
colorLabel="Compact example"
|
||||
languageLabel="Compact example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="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-render"><div data-component="PreferenceSwitcher" size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" class="showcase-instance showcase-instance--3"></div></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><PreferenceSwitcher
|
||||
size="lg"
|
||||
themeLabel="Advanced example"
|
||||
colorLabel="Advanced example"
|
||||
languageLabel="Advanced example"
|
||||
compact="false"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@theme</code><span>Fires when the component emits the theme event.</span></div><div><code>@color</code><span>Fires when the component emits the color event.</span></div><div><code>@language</code><span>Fires when the component emits the language event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('theme', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></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>
|
||||
</main>
|
||||
<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">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/pagination"><small>Previous</small><strong>← Pagination</strong></a>
|
||||
<a href="/components/scrollspy"><small>Next</small><strong>Scrollspy →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
// 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"
|
||||
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 = "Consistent structural wrapper for public-facing 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>Consistent structural wrapper for public-facing pages.</p>
|
||||
<div class="detail-badges"><span>10 props</span><span>3 slots</span><span>0 events</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">
|
||||
<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><div data-component="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 slot="before" class="showcase-slot">before slot</div><div slot="after" class="showcase-slot">after slot</div></div></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><PublicPageShell
|
||||
fullWidth="false">
|
||||
<!-- Add before, default, after slot content here -->
|
||||
</PublicPageShell></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="lg">lg</option><option value="xl">xl</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></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="hidden">hidden</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="dvh">dvh</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><select id="playground-public-page-shell-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></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>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="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"><div data-component="PublicPageShell" fullWidth="false" size="default" variant="default" class="showcase-instance showcase-instance--1"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></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><PublicPageShell
|
||||
fullWidth="false">
|
||||
<!-- Add before, default, after slot content here -->
|
||||
</PublicPageShell></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="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"><div data-component="PublicPageShell" fullWidth="false" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></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><PublicPageShell
|
||||
fullWidth="false"
|
||||
size="sm"
|
||||
variant="secondary">
|
||||
<!-- Add before, default, after slot content here -->
|
||||
</PublicPageShell></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="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"><div data-component="PublicPageShell" fullWidth="true" size="lg" variant="success" class="showcase-instance showcase-instance--3"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></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><PublicPageShell
|
||||
size="lg"
|
||||
variant="success">
|
||||
<!-- Add before, default, after slot content here -->
|
||||
</PublicPageShell></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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">Production default</a><a href="#public-page-shell-demo-2">Compact application</a><a href="#public-page-shell-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/metric-grid"><small>Previous</small><strong>← Metric Grid</strong></a>
|
||||
<a href="/components/section"><small>Next</small><strong>Section →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -653,7 +653,7 @@ component.addEventListener('change', (event) => {
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/pagination"><small>Previous</small><strong>← Pagination</strong></a>
|
||||
<a href="/components/preference-switcher"><small>Previous</small><strong>← Preference Switcher</strong></a>
|
||||
<a href="/components/sidebar"><small>Next</small><strong>Sidebar →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ page SearchBoxDetail {
|
||||
<span class="showcase-eyebrow">Advanced Forms component</span>
|
||||
<h1>Search Box</h1>
|
||||
<p>Theme-aware, responsive search box component.</p>
|
||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</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>
|
||||
@@ -116,11 +116,7 @@ page SearchBoxDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@search</code><span>Fires when the search query changes or is submitted.</span></div><div><code>@submit</code><span>Fires when the component submits its value.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('input', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>"Search Box"</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>"search"</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>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>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page SectionHeaderDetail {
|
||||
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") ?? "Section Header example"
|
||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default 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_headingLevel = ctx.url.searchParams.get("pg_headingLevel") ?? "2"
|
||||
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "3xl"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Section Header"
|
||||
description = "Reusable accessible section heading with eyebrow, title, description, icon, and actions."
|
||||
}
|
||||
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>Section Header</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Section Header</h1>
|
||||
<p>Reusable accessible section heading with eyebrow, title, description, icon, and actions.</p>
|
||||
<div class="detail-badges"><span>10 props</span><span>3 slots</span><span>0 events</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="SectionHeader" data-playground-public-tag="true" data-playground-has-slot="true">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure 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><div data-component="SectionHeader" id="{playground_id}" eyebrow="{playground_eyebrow}" title="{playground_title}" description="{playground_description}" align="{playground_align}" size="{playground_size}" color="{playground_color}" headingLevel="{playground_headingLevel}" maxWidth="{playground_maxWidth}" class="{playground_class}"><div slot="icon" class="showcase-slot">icon slot</div><div slot="actions" class="showcase-slot">actions slot</div></div></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><SectionHeader
|
||||
title="Section Header example"
|
||||
description="A polished default section header for a modern application."
|
||||
align="start">
|
||||
<!-- Add icon, default, actions slot content here -->
|
||||
</SectionHeader></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-section-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-header-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-section-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-section-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-section-header-title" name="pg_title" type="text" value="Section Header example" /></label><label class="playground-field" for="playground-section-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-section-header-description" name="pg_description" type="text" value="A polished default section header for a modern application." /></label><label class="playground-field" for="playground-section-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-section-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="end">end</option><option value="right">right</option><option value="split">split</option></select></label><label class="playground-field" for="playground-section-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-header-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-section-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-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-section-header-headingLevel"><span><strong>heading Level</strong><small>number</small></span><input id="playground-section-header-headingLevel" name="pg_headingLevel" type="number" value="2" /></label><label class="playground-field" for="playground-section-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-header-maxWidth" name="pg_maxWidth"><option value="3xl" selected>3xl</option><option value="xl">xl</option><option value="2xl">2xl</option><option value="4xl">4xl</option></select></label><label class="playground-field" for="playground-section-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-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>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="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"><div data-component="SectionHeader" title="Section Header example" description="A polished default section header for a modern application." align="start" size="default" headingLevel="2" class="showcase-instance showcase-instance--1"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><SectionHeader
|
||||
title="Section Header example"
|
||||
description="A polished default section header for a modern application."
|
||||
align="start">
|
||||
<!-- Add icon, default, actions slot content here -->
|
||||
</SectionHeader></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="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"><div data-component="SectionHeader" title="Compact Section Header" description="A compact configuration for dashboards and dense product surfaces." align="center" size="sm" headingLevel="2" class="showcase-instance showcase-instance--2"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><SectionHeader
|
||||
title="Compact Section Header"
|
||||
description="A compact configuration for dashboards and dense product surfaces."
|
||||
align="center"
|
||||
size="sm">
|
||||
<!-- Add icon, default, actions slot content here -->
|
||||
</SectionHeader></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="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"><div data-component="SectionHeader" title="Advanced Section Header" description="A richer configuration demonstrating additional content and hierarchy." align="end" size="lg" headingLevel="2" class="showcase-instance showcase-instance--3"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></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><SectionHeader
|
||||
title="Advanced Section Header"
|
||||
description="A richer configuration demonstrating additional content and hierarchy."
|
||||
align="end"
|
||||
size="lg">
|
||||
<!-- Add icon, default, actions slot content here -->
|
||||
</SectionHeader></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>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>"left"</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>headingLevel</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"3xl"</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="#section-header-demo-1">Production default</a><a href="#section-header-demo-2">Compact application</a><a href="#section-header-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/section"><small>Previous</small><strong>← Section</strong></a>
|
||||
<a href="/components/text-link"><small>Next</small><strong>Text Link →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page SectionDetail {
|
||||
layout = "showcase"
|
||||
state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
|
||||
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_spacing = ctx.url.searchParams.get("pg_spacing") ?? "lg"
|
||||
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
|
||||
state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
|
||||
state playground_borderTop = ctx.url.searchParams.get("pg_borderTop") ?? "false"
|
||||
state playground_borderBottom = ctx.url.searchParams.get("pg_borderBottom") ?? "false"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Section"
|
||||
description = "Theme-aware page section with consistent spacing, width, background, and border controls."
|
||||
}
|
||||
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>Section</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Section</h1>
|
||||
<p>Theme-aware page section with consistent spacing, width, background, and border controls.</p>
|
||||
<div class="detail-badges"><span>10 props</span><span>1 slots</span><span>0 events</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="Section" data-playground-public-tag="true" data-playground-has-slot="true">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Section</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><div data-component="Section" id="{playground_id}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" spacing="{playground_spacing}" maxWidth="{playground_maxWidth}" fullWidth="{playground_fullWidth}" borderTop="{playground_borderTop}" borderBottom="{playground_borderBottom}" class="{playground_class}"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></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><Section>
|
||||
<!-- Add default slot content here -->
|
||||
</Section></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-section-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-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-section-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-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-section-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-section-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</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-field" for="playground-section-spacing"><span><strong>spacing</strong><small>string</small></span><select id="playground-section-spacing" name="pg_spacing"><option value="lg" selected>lg</option><option value="sm">sm</option><option value="md">md</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-section-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-section-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-toggle" for="playground-section-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-section-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderTop"><span><strong>border Top</strong><small>boolean</small></span><input id="playground-section-borderTop" name="pg_borderTop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-section-borderBottom" name="pg_borderBottom" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-section-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-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="section-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"><div data-component="Section" size="default" variant="default" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></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><Section>
|
||||
<!-- Add default slot content here -->
|
||||
</Section></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="section-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"><div data-component="Section" size="sm" variant="secondary" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--2"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></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><Section
|
||||
size="sm"
|
||||
variant="secondary">
|
||||
<!-- Add default slot content here -->
|
||||
</Section></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="section-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"><div data-component="Section" size="lg" variant="success" fullWidth="true" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--3"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Rich supporting content with additional context.</span></div></div></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><Section
|
||||
size="lg"
|
||||
variant="success"
|
||||
fullWidth="true">
|
||||
<!-- Add default slot content here -->
|
||||
</Section></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>id</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>spacing</code></td><td>string</td><td><code>"lg"</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>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>borderTop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>borderBottom</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="#section-demo-1">Production default</a><a href="#section-demo-2">Compact application</a><a href="#section-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/public-page-shell"><small>Previous</small><strong>← Public Page Shell</strong></a>
|
||||
<a href="/components/section-header"><small>Next</small><strong>Section Header →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@ page SidebarDetail {
|
||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"sidebar-0-1\",\n \"key\": \"sidebar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#sidebar-demo\",\n \"actionHref\": \"#sidebar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"sidebar-0-2\",\n \"key\": \"sidebar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#sidebar-demo\",\n \"actionHref\": \"#sidebar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
||||
state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
|
||||
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||
state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Sidebar"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Sidebar"
|
||||
@@ -21,7 +22,7 @@ page SidebarDetail {
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Sidebar</h1>
|
||||
<p>Theme-aware, responsive sidebar component.</p>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>4 events</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>
|
||||
@@ -30,7 +31,7 @@ page SidebarDetail {
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><div data-component="Sidebar" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
|
||||
<div class="playground-preview-source" data-playground-preview><div data-component="Sidebar" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" mobileLabel="{playground_mobileLabel}" class="{playground_class}"></div></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><Sidebar
|
||||
@@ -142,12 +143,13 @@ page SidebarDetail {
|
||||
]
|
||||
}
|
||||
]'
|
||||
mobileLabel="Sidebar"
|
||||
/></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>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-sidebar-size"><span><strong>size</strong><small>string</small></span><select id="playground-sidebar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-sidebar-color"><span><strong>color</strong><small>string</small></span><select id="playground-sidebar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-sidebar-label"><span><strong>label</strong><small>string</small></span><input id="playground-sidebar-label" name="pg_label" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-sidebar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "sidebar-0-1",
|
||||
@@ -255,7 +257,7 @@ page SidebarDetail {
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-sidebar-active"><span><strong>active</strong><small>string</small></span><input id="playground-sidebar-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-sidebar-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-sidebar-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-sidebar-class"><span><strong>class</strong><small>string</small></span><input id="playground-sidebar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-sidebar-active"><span><strong>active</strong><small>string</small></span><input id="playground-sidebar-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-sidebar-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-sidebar-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-sidebar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-sidebar-mobileLabel" name="pg_mobileLabel" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-class"><span><strong>class</strong><small>string</small></span><input id="playground-sidebar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -270,7 +272,7 @@ page SidebarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="Sidebar" size="default" label="Sidebar" items="[{"id":"sidebar-0-1","key":"sidebar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"sidebar-0-2","key":"sidebar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="demo-render"><div data-component="Sidebar" size="default" label="Sidebar" items="[{"id":"sidebar-0-1","key":"sidebar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"sidebar-0-2","key":"sidebar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" mobileLabel="Sidebar" class="showcase-instance showcase-instance--1"></div></div>
|
||||
</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>
|
||||
@@ -383,6 +385,7 @@ page SidebarDetail {
|
||||
]
|
||||
}
|
||||
]'
|
||||
mobileLabel="Sidebar"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -395,7 +398,7 @@ page SidebarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="Sidebar" size="sm" label="Compact example" items="[{"id":"sidebar-1-1","key":"sidebar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"sidebar-1-2","key":"sidebar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" class="showcase-instance showcase-instance--2"></div></div>
|
||||
<div class="demo-render"><div data-component="Sidebar" size="sm" label="Compact example" items="[{"id":"sidebar-1-1","key":"sidebar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"sidebar-1-2","key":"sidebar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" mobileLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
|
||||
</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>
|
||||
@@ -510,6 +513,7 @@ page SidebarDetail {
|
||||
]
|
||||
}
|
||||
]'
|
||||
mobileLabel="Compact example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -522,7 +526,7 @@ page SidebarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="demo-render"><div data-component="Sidebar" size="lg" label="Advanced example" items="[{"id":"sidebar-2-1","key":"sidebar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"sidebar-2-2","key":"sidebar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" class="showcase-instance showcase-instance--3"></div></div>
|
||||
<div class="demo-render"><div data-component="Sidebar" size="lg" label="Advanced example" items="[{"id":"sidebar-2-1","key":"sidebar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"sidebar-2-2","key":"sidebar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" mobileLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
|
||||
</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>
|
||||
@@ -637,16 +641,17 @@ page SidebarDetail {
|
||||
]
|
||||
}
|
||||
]'
|
||||
mobileLabel="Advanced example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('toggle', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Open navigation"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#sidebar-demo-1">Production default</a><a href="#sidebar-demo-2">Compact application</a><a href="#sidebar-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,662 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page StatsBarDetail {
|
||||
layout = "showcase"
|
||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"stats-bar-0-1\",\n \"key\": \"stats-bar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#stats-bar-demo\",\n \"actionHref\": \"#stats-bar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"stats-bar-0-2\",\n \"key\": \"stats-bar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#stats-bar-demo\",\n \"actionHref\": \"#stats-bar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
||||
state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "4"
|
||||
state playground_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
|
||||
state playground_dividers = ctx.url.searchParams.get("pg_dividers") ?? "true"
|
||||
state playground_icons = ctx.url.searchParams.get("pg_icons") ?? "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") ?? "raised"
|
||||
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Stats Bar"
|
||||
description = "Compact responsive statistics strip."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Stats Bar</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Blocks component</span>
|
||||
<h1>Stats Bar</h1>
|
||||
<p>Compact responsive statistics strip.</p>
|
||||
<div class="detail-badges"><span>10 props</span><span>0 slots</span><span>0 events</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="StatsBar" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Stats 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><div data-component="StatsBar" items="{playground_items}" columns="{playground_columns}" compact="{playground_compact}" dividers="{playground_dividers}" icons="{playground_icons}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></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><StatsBar
|
||||
items='[
|
||||
{
|
||||
"id": "stats-bar-0-1",
|
||||
"key": "stats-bar-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": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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": "stats-bar-0-2",
|
||||
"key": "stats-bar-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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"
|
||||
]
|
||||
}
|
||||
]'
|
||||
compact="false"
|
||||
/></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-stats-bar-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-stats-bar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "stats-bar-0-1",
|
||||
"key": "stats-bar-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": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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": "stats-bar-0-2",
|
||||
"key": "stats-bar-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-stats-bar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-stats-bar-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-toggle" for="playground-stats-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-stats-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stats-bar-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-stats-bar-dividers" name="pg_dividers" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stats-bar-icons"><span><strong>icons</strong><small>boolean</small></span><input id="playground-stats-bar-icons" name="pg_icons" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stats-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-stats-bar-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-stats-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-stats-bar-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-stats-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-stats-bar-variant" name="pg_variant"><option value="raised" selected>raised</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-stats-bar-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-stats-bar-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-stats-bar-class"><span><strong>class</strong><small>string</small></span><input id="playground-stats-bar-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="stats-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"><div data-component="StatsBar" items="[{"id":"stats-bar-0-1","key":"stats-bar-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":"#stats-bar-demo","actionHref":"#stats-bar-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":"stats-bar-0-2","key":"stats-bar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#stats-bar-demo","actionHref":"#stats-bar-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"]}]" columns="4" compact="false" dividers="true" icons="true" size="default" variant="raised" class="showcase-instance showcase-instance--1"></div></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><StatsBar
|
||||
items='[
|
||||
{
|
||||
"id": "stats-bar-0-1",
|
||||
"key": "stats-bar-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": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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": "stats-bar-0-2",
|
||||
"key": "stats-bar-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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"
|
||||
]
|
||||
}
|
||||
]'
|
||||
compact="false"
|
||||
/></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="stats-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"><div data-component="StatsBar" items="[{"id":"stats-bar-1-1","key":"stats-bar-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":"#stats-bar-demo","actionHref":"#stats-bar-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":"stats-bar-1-2","key":"stats-bar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#stats-bar-demo","actionHref":"#stats-bar-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"]}]" columns="4" compact="true" dividers="true" icons="true" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></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><StatsBar
|
||||
items='[
|
||||
{
|
||||
"id": "stats-bar-1-1",
|
||||
"key": "stats-bar-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": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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": "stats-bar-1-2",
|
||||
"key": "stats-bar-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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"
|
||||
/></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="stats-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"><div data-component="StatsBar" items="[{"id":"stats-bar-2-1","key":"stats-bar-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":"#stats-bar-demo","actionHref":"#stats-bar-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":"stats-bar-2-2","key":"stats-bar-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":"#stats-bar-demo","actionHref":"#stats-bar-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"]}]" columns="4" compact="false" dividers="true" icons="true" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></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><StatsBar
|
||||
items='[
|
||||
{
|
||||
"id": "stats-bar-2-1",
|
||||
"key": "stats-bar-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": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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": "stats-bar-2-2",
|
||||
"key": "stats-bar-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": "#stats-bar-demo",
|
||||
"actionHref": "#stats-bar-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"
|
||||
]
|
||||
}
|
||||
]'
|
||||
compact="false"
|
||||
size="lg"
|
||||
variant="success"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>string</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>compact</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>true</code></td><td>No</td></tr><tr><td><code>icons</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>"raised"</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>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#stats-bar-demo-1">Production default</a><a href="#stats-bar-demo-2">Compact application</a><a href="#stats-bar-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/split-hero"><small>Previous</small><strong>← Split Hero</strong></a>
|
||||
<span></span>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,7 @@ page TabsDetail {
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Tabs</h1>
|
||||
<p>Theme-aware, responsive tabs component.</p>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</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>
|
||||
@@ -641,11 +641,7 @@ page TabsDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('change', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>"Tabs"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -0,0 +1,138 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page TextLinkDetail {
|
||||
layout = "showcase"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Text Link"
|
||||
state playground_href = ctx.url.searchParams.get("pg_href") ?? "#text-link-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"
|
||||
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||
state playground_showArrow = ctx.url.searchParams.get("pg_showArrow") ?? "true"
|
||||
state playground_underline = ctx.url.searchParams.get("pg_underline") ?? "false"
|
||||
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_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Text Link"
|
||||
description = "Styled inline action link with icons, arrows, external state, and disabled handling."
|
||||
}
|
||||
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>Text Link</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Layout component</span>
|
||||
<h1>Text Link</h1>
|
||||
<p>Styled inline action link with icons, arrows, external state, and disabled handling.</p>
|
||||
<div class="detail-badges"><span>14 props</span><span>0 slots</span><span>3 events</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="TextLink" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Text Link</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><div data-component="TextLink" label="{playground_label}" href="{playground_href}" target="{playground_target}" rel="{playground_rel}" external="{playground_external}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" showArrow="{playground_showArrow}" underline="{playground_underline}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" disabled="{playground_disabled}" class="{playground_class}"></div></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><TextLink
|
||||
label="Text Link"
|
||||
href="#text-link-demo"
|
||||
/></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-text-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-text-link-label" name="pg_label" type="text" value="Text Link" /></label><label class="playground-field" for="playground-text-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-text-link-href" name="pg_href" type="text" value="#text-link-demo" /></label><label class="playground-field" for="playground-text-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-text-link-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-text-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-text-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-text-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-text-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-text-link-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-text-link-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-text-link-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-toggle" for="playground-text-link-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-text-link-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-text-link-underline"><span><strong>underline</strong><small>boolean</small></span><input id="playground-text-link-underline" name="pg_underline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-text-link-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-text-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-text-link-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><option value="neutral">neutral</option></select></label><label class="playground-field" for="playground-text-link-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-text-link-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="button">button</option></select></label><label class="playground-toggle" for="playground-text-link-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-text-link-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-text-link-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="text-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-render"><div data-component="TextLink" label="Text Link" href="#text-link-demo" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1"></div></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><TextLink
|
||||
label="Text Link"
|
||||
href="#text-link-demo"
|
||||
/></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="text-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-render"><div data-component="TextLink" label="Compact example" href="#text-link-demo" external="false" icon="icon-[lucide--arrow-right]" showArrow="true" underline="false" size="sm" variant="secondary" disabled="false" class="showcase-instance showcase-instance--2"></div></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><TextLink
|
||||
label="Compact example"
|
||||
href="#text-link-demo"
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
/></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="text-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-render"><div data-component="TextLink" label="Advanced example" href="#text-link-demo" external="false" icon="icon-[lucide--trash-2]" showArrow="true" underline="false" size="lg" variant="success" disabled="false" class="showcase-instance showcase-instance--3"></div></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><TextLink
|
||||
label="Advanced example"
|
||||
href="#text-link-demo"
|
||||
icon="icon-[lucide--trash-2]"
|
||||
size="lg"
|
||||
variant="success"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('click', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></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>"Learn more"</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>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>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>underline</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>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="#text-link-demo-1">Production default</a><a href="#text-link-demo-2">Compact application</a><a href="#text-link-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/section-header"><small>Previous</small><strong>← Section Header</strong></a>
|
||||
<a href="/components/typography"><small>Next</small><strong>Typography →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,7 @@ page TimelineDetail {
|
||||
<span class="showcase-eyebrow">Base component</span>
|
||||
<h1>Timeline</h1>
|
||||
<p>Theme-aware, responsive timeline component.</p>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>1 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</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>
|
||||
@@ -257,7 +257,7 @@ page TimelineDetail {
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-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-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -649,11 +649,7 @@ page TimelineDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <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 or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||
|
||||
component.addEventListener('select', (event) => {
|
||||
console.log(event.detail)
|
||||
})</code></pre></section></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</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>"Timeline"</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>string</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>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -40,7 +40,7 @@ page TypographyDetail {
|
||||
</div>
|
||||
<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>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-typography-size"><span><strong>size</strong><small>string</small></span><select id="playground-typography-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-typography-color"><span><strong>color</strong><small>string</small></span><select id="playground-typography-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-typography-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-typography-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-typography-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-typography-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-typography-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-typography-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-typography-class"><span><strong>class</strong><small>string</small></span><input id="playground-typography-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-typography-size"><span><strong>size</strong><small>string</small></span><select id="playground-typography-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-typography-color"><span><strong>color</strong><small>string</small></span><select id="playground-typography-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-typography-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-typography-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-typography-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-typography-gap" name="pg_gap"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-typography-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-typography-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="full">full</option></select></label><label class="playground-field" for="playground-typography-class"><span><strong>class</strong><small>string</small></span><input id="playground-typography-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -111,7 +111,7 @@ page TypographyDetail {
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<a href="/components/link"><small>Previous</small><strong>← Link</strong></a>
|
||||
<a href="/components/text-link"><small>Previous</small><strong>← Text Link</strong></a>
|
||||
<span></span>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
page ExistingComponentsShowcase {
|
||||
layout = "none"
|
||||
|
||||
state cards = [
|
||||
{
|
||||
title: "Citizen services",
|
||||
description: "Access applications, certificates and verification services.",
|
||||
icon: "icon-[lucide--layout-grid]",
|
||||
href: "/services"
|
||||
},
|
||||
{
|
||||
title: "Public safety",
|
||||
description: "Read verified safety information and important advisories.",
|
||||
icon: "icon-[lucide--shield-check]",
|
||||
href: "/safety"
|
||||
}
|
||||
]
|
||||
|
||||
state tabs = [
|
||||
{ value: "overview", label: "Overview", title: "Overview", description: "A complete view of the redesigned component system." },
|
||||
{ value: "accessibility", label: "Accessibility", title: "Accessible by default", description: "Keyboard, focus and semantic behavior remain part of every component." }
|
||||
]
|
||||
|
||||
view {
|
||||
<PublicPageShell fullWidth="true">
|
||||
<Section spacing="lg">
|
||||
<SectionHeader
|
||||
eyebrow="WRNexus UI"
|
||||
title="Existing component redesign"
|
||||
description="Replacement implementations preserve the 0.5.11 public contracts while improving visual consistency."
|
||||
headingLevel="1"
|
||||
size="lg"
|
||||
/>
|
||||
|
||||
<Grid columns="3" gap="md" class="mt-10">
|
||||
{#each cards as item}
|
||||
<Card
|
||||
title='{item.title}'
|
||||
description='{item.description}'
|
||||
actionLabel="Open"
|
||||
actionHref='{item.href}'
|
||||
hover="lift"
|
||||
>
|
||||
<div class="mb-5 flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
|
||||
<span class='{item.icon + " size-6"}' aria-hidden="true"></span>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<Section variant="soft" spacing="lg" borderTop="true" borderBottom="true">
|
||||
<Columns columns="2" gap="lg">
|
||||
<SearchBox
|
||||
label="Search services"
|
||||
name="q"
|
||||
placeholder="Search services, notices or offices"
|
||||
/>
|
||||
|
||||
<Map
|
||||
title="Service locations"
|
||||
description="Use the default slot to mount the selected map provider."
|
||||
items='{[
|
||||
{ label: "Head office", x: 30, y: 35 },
|
||||
{ label: "Service centre", x: 65, y: 55 }
|
||||
]}'
|
||||
/>
|
||||
</Columns>
|
||||
</Section>
|
||||
|
||||
<Section spacing="lg">
|
||||
<Tabs items='{tabs}' active="overview" />
|
||||
</Section>
|
||||
</PublicPageShell>
|
||||
}
|
||||
}
|
||||
@@ -3,16 +3,26 @@ page FormsShowcase {
|
||||
layout = "showcase"
|
||||
seo {
|
||||
title = "Forms components"
|
||||
description = "11 forms components from @wrnexus/ui."
|
||||
description = "12 forms components from @wrnexus/ui."
|
||||
}
|
||||
view {
|
||||
<header class="showcase-hero showcase-hero--category">
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Forms</h1>
|
||||
<p class="showcase-description">11 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>11 components</span><span>Multiple use cases</span><span>103 live configurations</span></div>
|
||||
<p class="showcase-description">12 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>12 components</span><span>Multiple use cases</span><span>106 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="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>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Forms</span><h2>Auth Form</h2><p>Reusable authentication form for sign-in, registration, recovery, reset, and MFA.</p></div>
|
||||
<div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/auth-form">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
@@ -20,7 +30,7 @@ page FormsShowcase {
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p></div>
|
||||
<div class="catalog-card-footer"><span>27 props · 0 slots</span><a href="/components/checkbox">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>27 props · 1 slots</span><a href="/components/checkbox">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
|
||||
@@ -10,18 +10,18 @@ page ComponentShowcase {
|
||||
<header class="showcase-hero showcase-hero--home">
|
||||
<span class="showcase-eyebrow">The UI foundation for WRNexus</span>
|
||||
<h1 class="showcase-title">Build modern products<br /><em>at framework speed.</em></h1>
|
||||
<p class="showcase-description">A complete, accessible component system with 85 primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.</p>
|
||||
<p class="showcase-description">A complete, accessible component system with 108 primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.</p>
|
||||
<div class="home-actions"><a class="home-primary-action" href="/docs">Get started <span aria-hidden="true">→</span></a><a class="home-secondary-action" href="/blocks">Explore blocks</a></div>
|
||||
<div class="home-install"><span>$</span><code>bun add @wrnexus/ui</code><button type="button" data-copy-text="bun add @wrnexus/ui" aria-label="Copy install command"><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span></button></div>
|
||||
</header>
|
||||
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>85 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/blocks">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
|
||||
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>108 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/blocks">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
|
||||
<section class="showcase-stats">
|
||||
<div class="showcase-stat"><strong>85</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>502</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>108</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>571</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
|
||||
<div class="showcase-stat"><strong>8</strong><span>Focused categories</span></div>
|
||||
<div class="showcase-stat"><strong>9</strong><span>Focused categories</span></div>
|
||||
</section>
|
||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/advanced-forms"><span class="home-category-index">01</span><div><strong>Advanced Forms</strong><p>9 components · 116 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/base"><span class="home-category-index">02</span><div><strong>Base</strong><p>27 components · 169 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/forms"><span class="home-category-index">03</span><div><strong>Forms</strong><p>11 components · 103 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/integrations"><span class="home-category-index">04</span><div><strong>Integrations</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/layout"><span class="home-category-index">05</span><div><strong>Layout</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/navigation"><span class="home-category-index">06</span><div><strong>Navigation</strong><p>9 components · 27 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/overlays"><span class="home-category-index">07</span><div><strong>Overlays</strong><p>6 components · 18 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/tables"><span class="home-category-index">08</span><div><strong>Tables</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/advanced-forms"><span class="home-category-index">01</span><div><strong>Advanced Forms</strong><p>9 components · 116 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/base"><span class="home-category-index">02</span><div><strong>Base</strong><p>28 components · 172 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/blocks"><span class="home-category-index">03</span><div><strong>Blocks</strong><p>11 components · 33 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/forms"><span class="home-category-index">04</span><div><strong>Forms</strong><p>12 components · 106 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/integrations"><span class="home-category-index">05</span><div><strong>Integrations</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/layout"><span class="home-category-index">06</span><div><strong>Layout</strong><p>17 components · 51 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/navigation"><span class="home-category-index">07</span><div><strong>Navigation</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/overlays"><span class="home-category-index">08</span><div><strong>Overlays</strong><p>6 components · 18 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/tables"><span class="home-category-index">09</span><div><strong>Tables</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,16 +3,26 @@ page LayoutShowcase {
|
||||
layout = "showcase"
|
||||
seo {
|
||||
title = "Layout components"
|
||||
description = "10 layout components from @wrnexus/ui."
|
||||
description = "17 layout components from @wrnexus/ui."
|
||||
}
|
||||
view {
|
||||
<header class="showcase-hero showcase-hero--category">
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Layout</h1>
|
||||
<p class="showcase-description">10 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>10 components</span><span>Multiple use cases</span><span>30 live configurations</span></div>
|
||||
<p class="showcase-description">17 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>17 components</span><span>Multiple use cases</span><span>51 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="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 slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Auth Split Layout</h2><p>Responsive 50/50 authentication layout with content and form regions.</p></div>
|
||||
<div class="catalog-card-footer"><span>8 props · 2 slots</span><a href="/components/auth-split-layout">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
@@ -53,6 +63,16 @@ page LayoutShowcase {
|
||||
<div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/divider">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="FeatureGrid" size="default" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="start" class="showcase-instance showcase-instance--1"></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Feature Grid</h2><p>Responsive equal-height grid for feature and service cards.</p></div>
|
||||
<div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/feature-grid">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
@@ -103,6 +123,56 @@ page LayoutShowcase {
|
||||
<div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/link">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="MetricGrid" items="[{"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":[{"label":"Nested option A","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":"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":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="default" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Metric Grid</h2><p>Responsive collection of metric cards.</p></div>
|
||||
<div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/metric-grid">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="PublicPageShell" fullWidth="false" size="default" variant="default" class="showcase-instance showcase-instance--1"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Public Page Shell</h2><p>Consistent structural wrapper for public-facing pages.</p></div>
|
||||
<div class="catalog-card-footer"><span>10 props · 3 slots</span><a href="/components/public-page-shell">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Section" size="default" variant="default" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Section</h2><p>Theme-aware page section with consistent spacing, width, background, and border controls.</p></div>
|
||||
<div class="catalog-card-footer"><span>10 props · 1 slots</span><a href="/components/section">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="SectionHeader" title="Section Header example" description="A polished default section header for a modern application." align="start" size="default" headingLevel="2" class="showcase-instance showcase-instance--1"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Section Header</h2><p>Reusable accessible section heading with eyebrow, title, description, icon, and actions.</p></div>
|
||||
<div class="catalog-card-footer"><span>10 props · 3 slots</span><a href="/components/section-header">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="TextLink" label="Text Link" href="#text-link-demo" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Text Link</h2><p>Styled inline action link with icons, arrows, external state, and disabled handling.</p></div>
|
||||
<div class="catalog-card-footer"><span>14 props · 0 slots</span><a href="/components/text-link">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,103 +0,0 @@
|
||||
page NewComponentsShowcase {
|
||||
layout = "none"
|
||||
|
||||
state features = [
|
||||
{
|
||||
title: "Reusable sections",
|
||||
description: "Keep page spacing and surfaces consistent across applications.",
|
||||
icon: "icon-[lucide--panels-top-left]",
|
||||
href: "#sections"
|
||||
},
|
||||
{
|
||||
title: "Controlled cards",
|
||||
description: "Compose capabilities without duplicating card styles.",
|
||||
icon: "icon-[lucide--layout-grid]",
|
||||
href: "#cards"
|
||||
},
|
||||
{
|
||||
title: "Accessible actions",
|
||||
description: "Shared buttons, links and focus states remain predictable.",
|
||||
icon: "icon-[lucide--mouse-pointer-click]",
|
||||
href: "#actions"
|
||||
}
|
||||
]
|
||||
|
||||
state metrics = [
|
||||
{ label: "Existing redesigns", value: "15", icon: "icon-[lucide--refresh-cw]" },
|
||||
{ label: "New composites", value: "18", icon: "icon-[lucide--blocks]" },
|
||||
{ label: "Total files", value: "33", icon: "icon-[lucide--files]" },
|
||||
{ label: "Theme support", value: "100", suffix: "%", icon: "icon-[lucide--palette]" }
|
||||
]
|
||||
|
||||
view {
|
||||
<PublicPageShell fullWidth="true">
|
||||
<AnnouncementBar
|
||||
badge="New"
|
||||
message="WRNexus UI composite component release"
|
||||
description="The package adds reusable marketing and public-page components."
|
||||
actionLabel="Review components"
|
||||
actionHref="#components"
|
||||
dismissible="true"
|
||||
/>
|
||||
|
||||
<SplitHero
|
||||
eyebrow="@wrnexus/ui 0.5.12"
|
||||
title="A complete reusable"
|
||||
highlight="page-building system"
|
||||
description="Build PMS, WRNexus and WorkRoot pages from shared, theme-aware components instead of repeated page markup."
|
||||
primaryLabel="Browse components"
|
||||
primaryHref="#components"
|
||||
primaryIcon="icon-[lucide--blocks]"
|
||||
secondaryLabel="Read migration guide"
|
||||
secondaryHref="#migration"
|
||||
>
|
||||
<Card
|
||||
data-slot="visual"
|
||||
title="Component release"
|
||||
description="15 redesigned primitives and 18 new composites."
|
||||
variant="soft"
|
||||
size="lg"
|
||||
>
|
||||
<MetricGrid items='{metrics}' columns="2" tabletColumns="2" />
|
||||
</Card>
|
||||
</SplitHero>
|
||||
|
||||
<Section id="components" variant="soft" spacing="lg" borderTop="true" borderBottom="true">
|
||||
<MarketingSectionHeader
|
||||
eyebrow="Component system"
|
||||
title="Design once and reuse everywhere"
|
||||
description="The new composites are application-independent and remain controlled by the WRNexus theme tokens."
|
||||
actionLabel="View all documentation"
|
||||
actionHref="/components"
|
||||
/>
|
||||
|
||||
<FeatureGrid columns="3" tabletColumns="2" gap="lg" class="mt-10">
|
||||
{#each features as feature}
|
||||
<FeatureIconCard
|
||||
icon='{feature.icon}'
|
||||
title='{feature.title}'
|
||||
description='{feature.description}'
|
||||
href='{feature.href}'
|
||||
/>
|
||||
{/each}
|
||||
</FeatureGrid>
|
||||
</Section>
|
||||
|
||||
<StatsBar items='{metrics}' columns="4" />
|
||||
|
||||
<CTASection
|
||||
eyebrow="Ready for PMS"
|
||||
title="Publish the UI package, then rebuild the Police Management System"
|
||||
description="Pages can now focus on police-domain data while the UI package owns shared layout and visual behavior."
|
||||
primaryLabel="Publish release"
|
||||
primaryHref="#publish"
|
||||
primaryIcon="icon-[lucide--package-check]"
|
||||
secondaryLabel="Open checklist"
|
||||
secondaryHref="#checklist"
|
||||
variant="gradient"
|
||||
/>
|
||||
|
||||
<BackToTop threshold="400" showProgress="true" />
|
||||
</PublicPageShell>
|
||||
}
|
||||
}
|
||||
@@ -36,11 +36,11 @@ page OverlaysShowcase {
|
||||
<article class="catalog-card">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><div data-component="Dropdown" size="default" title="Dropdown example" description="A polished default dropdown for a modern application." open="true" closeLabel="Dropdown" class="showcase-instance showcase-instance--1"></div></div>
|
||||
<div class="catalog-card-stage"><div data-component="Dropdown" size="default" label="Dropdown" items="[{"id":"dropdown-0-1","key":"dropdown-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":"#dropdown-demo","actionHref":"#dropdown-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":"dropdown-0-2","key":"dropdown-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#dropdown-demo","actionHref":"#dropdown-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 slot="trigger" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trigger slot</span></div><div slot="header" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>header slot</span></div><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Overlays</span><h2>Dropdown</h2><p>Theme-aware, responsive dropdown component.</p></div>
|
||||
<div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/dropdown">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>6 props · 3 slots</span><a href="/components/dropdown">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card">
|
||||
|
||||
@@ -13,8 +13,12 @@ export interface Routes {
|
||||
"/components/advanced-range-slider": Record<string, never>;
|
||||
"/components/advanced-select": Record<string, never>;
|
||||
"/components/alert": Record<string, never>;
|
||||
"/components/announcement-bar": Record<string, never>;
|
||||
"/components/auth-form": Record<string, never>;
|
||||
"/components/auth-split-layout": Record<string, never>;
|
||||
"/components/avatar": Record<string, never>;
|
||||
"/components/avatar-group": Record<string, never>;
|
||||
"/components/back-to-top": Record<string, never>;
|
||||
"/components/badge": Record<string, never>;
|
||||
"/components/blockquote": Record<string, never>;
|
||||
"/components/breadcrumb": Record<string, never>;
|
||||
@@ -34,6 +38,7 @@ export interface Routes {
|
||||
"/components/container": Record<string, never>;
|
||||
"/components/context-menu": Record<string, never>;
|
||||
"/components/copy-markup": Record<string, never>;
|
||||
"/components/ctasection": Record<string, never>;
|
||||
"/components/custom-scrollbar": Record<string, never>;
|
||||
"/components/data-map": Record<string, never>;
|
||||
"/components/data-table": Record<string, never>;
|
||||
@@ -43,10 +48,16 @@ export interface Routes {
|
||||
"/components/drag-and-drop": Record<string, never>;
|
||||
"/components/drawer": Record<string, never>;
|
||||
"/components/dropdown": Record<string, never>;
|
||||
"/components/feature-card": Record<string, never>;
|
||||
"/components/feature-grid": Record<string, never>;
|
||||
"/components/feature-icon-card": Record<string, never>;
|
||||
"/components/file-input": Record<string, never>;
|
||||
"/components/file-upload": Record<string, never>;
|
||||
"/components/file-upload-progress": Record<string, never>;
|
||||
"/components/footer": Record<string, never>;
|
||||
"/components/grid": Record<string, never>;
|
||||
"/components/hero": Record<string, never>;
|
||||
"/components/hero-actions": Record<string, never>;
|
||||
"/components/image": Record<string, never>;
|
||||
"/components/input": Record<string, never>;
|
||||
"/components/input-group": Record<string, never>;
|
||||
@@ -58,30 +69,42 @@ export interface Routes {
|
||||
"/components/list": Record<string, never>;
|
||||
"/components/list-group": Record<string, never>;
|
||||
"/components/map": Record<string, never>;
|
||||
"/components/marketing-section-header": Record<string, never>;
|
||||
"/components/marquee": Record<string, never>;
|
||||
"/components/mega-menu": Record<string, never>;
|
||||
"/components/metric-card": Record<string, never>;
|
||||
"/components/metric-grid": Record<string, never>;
|
||||
"/components/modal": Record<string, never>;
|
||||
"/components/nav": Record<string, never>;
|
||||
"/components/navbar": Record<string, never>;
|
||||
"/components/page-header": Record<string, never>;
|
||||
"/components/pagination": Record<string, never>;
|
||||
"/components/pin-input": Record<string, never>;
|
||||
"/components/popover": Record<string, never>;
|
||||
"/components/portal-dashboard": Record<string, never>;
|
||||
"/components/preference-switcher": Record<string, never>;
|
||||
"/components/progress": Record<string, never>;
|
||||
"/components/public-page-shell": Record<string, never>;
|
||||
"/components/radio": Record<string, never>;
|
||||
"/components/range-slider": Record<string, never>;
|
||||
"/components/rating": Record<string, never>;
|
||||
"/components/scrollspy": Record<string, never>;
|
||||
"/components/search-box": Record<string, never>;
|
||||
"/components/section": Record<string, never>;
|
||||
"/components/section-header": Record<string, never>;
|
||||
"/components/select": Record<string, never>;
|
||||
"/components/sidebar": Record<string, never>;
|
||||
"/components/skeleton": Record<string, never>;
|
||||
"/components/spinner": Record<string, never>;
|
||||
"/components/split-hero": Record<string, never>;
|
||||
"/components/stats-bar": Record<string, never>;
|
||||
"/components/stepper": Record<string, never>;
|
||||
"/components/strong-password": Record<string, never>;
|
||||
"/components/styled-icon": Record<string, never>;
|
||||
"/components/switch": Record<string, never>;
|
||||
"/components/table": Record<string, never>;
|
||||
"/components/tabs": Record<string, never>;
|
||||
"/components/text-link": Record<string, never>;
|
||||
"/components/textarea": Record<string, never>;
|
||||
"/components/time-picker": Record<string, never>;
|
||||
"/components/timeline": Record<string, never>;
|
||||
|
||||
Reference in New Issue
Block a user