feat: release design system engine, studio and component contracts
This commit is contained in:
Clintchiz committed
1 parent
ff1065fb27
commit
3943b946d6
693 files changed
+175546
-3894
No files matched your search
@@ -9,7 +9,7 @@ layout Showcase {
|
||||
<label class="docs-search"><span class="icon-[lucide--search] size-4" aria-hidden="true"></span><input type="search" placeholder="Search documentation..." data-docs-search /><kbd>⌘ K</kbd></label>
|
||||
</div>
|
||||
<div class="showcase-header-end">
|
||||
<nav aria-label="Primary navigation" class="showcase-nav"><a href="/preview">Examples</a><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav>
|
||||
<nav aria-label="Primary navigation" class="showcase-nav"><a href="/preview">Examples</a><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a><a href="/design-studio/" data-no-nav>Design Studio</a></nav>
|
||||
<button type="button" class="showcase-theme" data-design-panel-toggle aria-label="Customize design"><span class="icon-[lucide--palette] size-5" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -27,14 +27,14 @@ layout Showcase {
|
||||
<nav aria-label="Documentation directory">
|
||||
<section class="docs-directory-group docs-directory-guides"><strong>Getting Started</strong><div><a href="/docs">Introduction</a><a href="/installation">Installation</a><a href="/framework-guides">Framework guides</a><a href="/accessibility">Accessibility</a><a href="/resources">Resources</a></div></section>
|
||||
<section class="docs-directory-group docs-directory-guides"><strong>Customization</strong><div><a href="/dark-mode">Dark Mode</a><a href="/themes">Themes <small>New</small></a><a href="/colors">Colors <small>New</small></a><a href="/fonts">Fonts</a><a href="/sizing">Sizing</a></div></section>
|
||||
|
||||
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/base">Base</a>
|
||||
<div><a data-docs-component-link href="/components/accordion">Accordion</a><a data-docs-component-link href="/components/alert">Alert</a><a data-docs-component-link href="/components/avatar">Avatar</a><a data-docs-component-link href="/components/avatar-group">Avatar Group</a><a data-docs-component-link href="/components/badge">Badge</a><a data-docs-component-link href="/components/blockquote">Blockquote</a><a data-docs-component-link href="/components/button">Button</a><a data-docs-component-link href="/components/button-group">Button Group</a><a data-docs-component-link href="/components/card">Card</a><a data-docs-component-link href="/components/carousel">Carousel</a><a data-docs-component-link href="/components/chat-bubble">Chat Bubble</a><a data-docs-component-link href="/components/collapse">Collapse</a><a data-docs-component-link href="/components/date-picker">Date Picker</a><a data-docs-component-link href="/components/device-frame">Device Frame</a><a data-docs-component-link href="/components/file-upload-progress">File Upload Progress</a><a data-docs-component-link href="/components/legend-indicator">Legend Indicator</a><a data-docs-component-link href="/components/list">List</a><a data-docs-component-link href="/components/list-group">List Group</a><a data-docs-component-link href="/components/marquee">Marquee</a><a data-docs-component-link href="/components/progress">Progress</a><a data-docs-component-link href="/components/rating">Rating</a><a data-docs-component-link href="/components/skeleton">Skeleton</a><a data-docs-component-link href="/components/spinner">Spinner</a><a data-docs-component-link href="/components/styled-icon">Styled Icon</a><a data-docs-component-link href="/components/timeline">Timeline</a><a data-docs-component-link href="/components/tree-view">Tree View</a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/core">Core</a>
|
||||
<div><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div>
|
||||
<div><a data-docs-component-link href="/components/drawflow-canvas">Drawflow Canvas</a><a data-docs-component-link href="/components/flow-canvas">Flow Canvas</a><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a><a data-docs-component-link href="/components/toaster">Toaster</a></div>
|
||||
</section>
|
||||
<section class="docs-directory-group">
|
||||
<a class="docs-directory-heading" href="/data">Data</a>
|
||||
|
||||
@@ -11,7 +11,7 @@ page AccessibilityGuide {
|
||||
<section class="guide-section"><h2>Overview</h2><p>Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
|
||||
<section class="guide-section"><h2>Label controls and explain errors</h2><p>Give every control a visible label. Use helperText for instructions and error for actionable feedback. Test Tab, Shift+Tab, Enter and Escape; focus must remain visible and follow the reading order.</p><pre><code><Input label="Email address" type="email" name="email" required="true" helperText="Use your work email." error="Enter a valid email address." />
|
||||
<Button label="Save changes" disabled="true" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ page ColorsGuide {
|
||||
<section class="guide-section"><h2>Choose color by meaning</h2><p>Use primary for the main action, danger for destructive actions and success for completion. Always include text or an icon so color is not the only signal.</p><pre><code><Button label="Save" color="primary" />
|
||||
<Button label="Delete record" color="danger" />
|
||||
<Badge label="Active" color="success" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -112,7 +112,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-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"><Accordion size="default" variant="default" class="showcase-instance showcase-instance--1" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="false" alwaysOpen="false" disabled="false" indicator="chevron" indicatorPosition="end" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Plain disclosure rows usage">
|
||||
@@ -158,7 +158,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-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"><Accordion size="sm" variant="secondary" class="showcase-instance showcase-instance--2" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="false" alwaysOpen="false" disabled="false" indicator="plus" indicatorPosition="start" showIndicator="true" bordered="true" separated="false" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bordered group usage">
|
||||
@@ -205,7 +205,7 @@ page AccordionDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="accordion-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"><Accordion size="lg" variant="success" class="showcase-instance showcase-instance--3" items='[{"value":"workspace","label":"How do I create a workspace?","content":"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."},{"value":"billing","label":"Can I change my plan later?","content":"Yes. Open Billing to compare plans and choose the one that suits your team."},{"value":"security","label":"How is my account protected?","content":"Enable two-step verification and add a recovery method to keep your account secure."}]' defaultOpen='["workspace"]' multiple="true" alwaysOpen="false" disabled="false" indicator="chevron" indicatorPosition="end" showIndicator="true" bordered="true" separated="true" flush="false" contentItalic="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Separate panels usage">
|
||||
|
||||
@@ -177,7 +177,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-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"><AdvancedSelect size="default" label="Default advanced select" name="advanced-select-1" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default advanced select usage">
|
||||
@@ -241,7 +241,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-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"><AdvancedSelect size="default" label="Grouped options" name="advanced-select-2" value="design" values='[]' options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped options usage">
|
||||
@@ -316,7 +316,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-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"><AdvancedSelect size="default" label="Fixed-position dropdown" name="advanced-select-3" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed-position dropdown usage">
|
||||
@@ -382,7 +382,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Placeholder with icon" name="advanced-select-4" value="" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a workspace" placeholderIcon="icon-[lucide--building-2]" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Placeholder with icon usage">
|
||||
@@ -448,7 +448,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Allow empty selection" name="advanced-select-5" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="true" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Allow empty selection usage">
|
||||
@@ -512,7 +512,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection" name="advanced-select-6" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection usage">
|
||||
@@ -580,7 +580,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with optgroups" name="advanced-select-7" value="" values='["design","engineering"]' options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with optgroups usage">
|
||||
@@ -658,7 +658,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with option templates" name="advanced-select-8" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with option templates usage">
|
||||
@@ -727,7 +727,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with counter" name="advanced-select-9" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with counter usage">
|
||||
@@ -796,7 +796,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with conditional counter" name="advanced-select-10" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple selection with conditional counter usage">
|
||||
@@ -866,7 +866,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Counter with option templates" name="advanced-select-11" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Counter with option templates usage">
|
||||
@@ -933,7 +933,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Searchable dropdown" name="advanced-select-12" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Searchable dropdown usage">
|
||||
@@ -997,7 +997,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Minimum search length" name="advanced-select-13" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimum search length usage">
|
||||
@@ -1062,7 +1062,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Search result limit" name="advanced-select-14" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="3" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search result limit usage">
|
||||
@@ -1127,7 +1127,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Scroll to selected option" name="advanced-select-15" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Scroll to selected option usage">
|
||||
@@ -1192,7 +1192,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Search match mode" name="advanced-select-16" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search match mode usage">
|
||||
@@ -1257,7 +1257,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-17" class="demo-canvas demo-canvas--17">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Search labels and descriptions" name="advanced-select-17" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
||||
@@ -1321,7 +1321,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-18" class="demo-canvas demo-canvas--18">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Tag-style selection" name="advanced-select-18" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Tag-style selection usage">
|
||||
@@ -1387,7 +1387,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-19" class="demo-canvas demo-canvas--19">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Disabled tag selection" name="advanced-select-19" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="true" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled tag selection usage">
|
||||
@@ -1454,7 +1454,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-20" class="demo-canvas demo-canvas--20">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Option template with icons" name="advanced-select-20" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with icons usage">
|
||||
@@ -1520,7 +1520,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-21" class="demo-canvas demo-canvas--21">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Option template with avatars" name="advanced-select-21" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with avatars usage">
|
||||
@@ -1586,7 +1586,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-22" class="demo-canvas demo-canvas--22">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Option template with color indicators" name="advanced-select-22" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="color" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option template with color indicators usage">
|
||||
@@ -1652,7 +1652,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-23" class="demo-canvas demo-canvas--23">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="lg" label="Advanced select sizes" name="advanced-select-23" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Advanced select sizes usage">
|
||||
@@ -1718,7 +1718,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-24" class="demo-canvas demo-canvas--24">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Disabled advanced select" name="advanced-select-24" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled advanced select usage">
|
||||
@@ -1784,7 +1784,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-25" class="demo-canvas demo-canvas--25">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Inside a modal" name="advanced-select-25" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inside a modal usage">
|
||||
@@ -1849,7 +1849,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-26" class="demo-canvas demo-canvas--26">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="advanced-select-validation" class="demo-validation-form"><AdvancedSelect size="default" label="Validation states" name="advanced-select-26" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation states usage">
|
||||
@@ -1915,7 +1915,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-27" class="demo-canvas demo-canvas--27">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="advanced-select-dynamic-validation" class="demo-validation-form"><AdvancedSelect size="default" label="Dynamic validation styling" name="advanced-select-27" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dynamic validation styling usage">
|
||||
@@ -1981,7 +1981,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-28" class="demo-canvas demo-canvas--28">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Add or remove options" name="advanced-select-28" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Add or remove options usage">
|
||||
@@ -2046,7 +2046,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-29" class="demo-canvas demo-canvas--29">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Add or remove options in multiple mode" name="advanced-select-29" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Add or remove options in multiple mode usage">
|
||||
@@ -2114,7 +2114,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-30" class="demo-canvas demo-canvas--30">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Set a single value programmatically" name="advanced-select-30" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Set a single value programmatically usage">
|
||||
@@ -2179,7 +2179,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-31" class="demo-canvas demo-canvas--31">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Set multiple values programmatically" name="advanced-select-31" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Set multiple values programmatically usage">
|
||||
@@ -2247,7 +2247,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-32" class="demo-canvas demo-canvas--32">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Remote data source" name="advanced-select-32" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data source usage">
|
||||
@@ -2314,7 +2314,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-33" class="demo-canvas demo-canvas--33">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Remote data source (multiple)" name="advanced-select-33" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data source (multiple) usage">
|
||||
@@ -2384,7 +2384,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-34" class="demo-canvas demo-canvas--34">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Remote data tags" name="advanced-select-34" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data tags usage">
|
||||
@@ -2455,7 +2455,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-35" class="demo-canvas demo-canvas--35">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Option templates with remote data" name="advanced-select-35" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Option templates with remote data usage">
|
||||
@@ -2523,7 +2523,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-36" class="demo-canvas demo-canvas--36">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Conditional counter with remote data" name="advanced-select-36" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Conditional counter with remote data usage">
|
||||
@@ -2592,7 +2592,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-37" class="demo-canvas demo-canvas--37">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Avatar template with remote data" name="advanced-select-37" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Avatar template with remote data usage">
|
||||
@@ -2660,7 +2660,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-38" class="demo-canvas demo-canvas--38">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Preselected values" name="advanced-select-38" value="engineering" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Preselected values usage">
|
||||
@@ -2725,7 +2725,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-39" class="demo-canvas demo-canvas--39">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Infinite scroll" name="advanced-select-39" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="true" hasMore="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Infinite scroll usage">
|
||||
@@ -2793,7 +2793,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-40" class="demo-canvas demo-canvas--40">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Inside overflow-hidden containers" name="advanced-select-40" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inside overflow-hidden containers usage">
|
||||
@@ -2859,7 +2859,7 @@ page AdvancedSelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="advanced-select-demo-41" class="demo-canvas demo-canvas--41">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AdvancedSelect size="default" label="Destroy and reinitialize" name="advanced-select-41" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Destroy and reinitialize usage">
|
||||
|
||||
@@ -85,7 +85,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-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"><Alert size="default" color="success" variant="soft" class="" radius="md" shadow="none" title="Changes saved" description="Your workspace settings are up to date." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--circle-check]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Success message usage">
|
||||
@@ -118,7 +118,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-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"><Alert size="default" color="info" variant="soft" class="" radius="md" shadow="none" title="Scheduled maintenance" description="The dashboard will be unavailable Sunday, 02:00–02:30 UTC." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--info]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Informational notice usage">
|
||||
@@ -150,7 +150,7 @@ page AlertDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="alert-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"><Alert size="default" color="warning" variant="soft" class="" radius="md" shadow="none" title="Payment needs attention" description="Update your payment method to keep your subscription active." items='[]' actions='[]' showIcon="true" icon="icon-[lucide--triangle-alert]" dismissible="true" dismissLabel="Dismiss alert" role="alert" live="polite" linkLabel="" linkHref="" actionLabel="Update payment" actionHref="#payment" compact="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Action required usage">
|
||||
|
||||
@@ -120,7 +120,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -171,7 +171,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="sm" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -223,7 +223,7 @@ page AvatarGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><AvatarGroup items='[{"name":"Aisha Khan","initials":"AK","tooltip":"Aisha Khan · Product designer"},{"name":"Daniel Lee","initials":"DL","tooltip":"Daniel Lee · Engineer"},{"name":"Maya Patel","initials":"MP","tooltip":"Maya Patel · Product manager"},{"name":"Oliver Reed","initials":"OR","tooltip":"Oliver Reed · Support"},{"name":"Sofia Chen","initials":"SC","tooltip":"Sofia Chen · Operations"}]' size="md" color="primary" variant="solid" shape="circle" layout="grid" maxVisible="3" columns="3" borderColor="" showTooltips="true" overflowLabel="Show remaining members" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -71,7 +71,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -93,7 +93,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="sm" color="primary" variant="solid" shape="circle" status="" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -116,7 +116,7 @@ page AvatarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="avatar-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Avatar src="" alt="Aisha Khan" initials="AK" size="md" color="primary" variant="solid" shape="circle" status="online" statusLabel="" statusPosition="bottom" badge="" badgeIcon="" badgeLabel="" tooltip="Aisha Khan · Product designer" name="Aisha Khan" description="Product designer" loading="lazy" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -44,7 +44,7 @@ page BackToTopDetail {
|
||||
<pre><code data-playground-code><BackToTop /></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>
|
||||
@@ -63,7 +63,7 @@ page BackToTopDetail {
|
||||
<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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="solid" shape="round" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Floating round control usage">
|
||||
@@ -82,7 +82,7 @@ page BackToTopDetail {
|
||||
<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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="right" offset="md" behavior="smooth" showProgress="false" showLabel="true" alwaysVisible="true" size="default" color="primary" variant="soft" shape="pill" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pill control with label usage">
|
||||
@@ -104,7 +104,7 @@ page BackToTopDetail {
|
||||
<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"><BackToTop threshold="500" label="Back to top" ariaLabel="Scroll back to top" icon="icon-[lucide--arrow-up]" position="left" offset="lg" behavior="smooth" showProgress="true" showLabel="false" alwaysVisible="true" size="default" color="primary" variant="outline" shape="round" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Progress-aware control usage">
|
||||
@@ -119,7 +119,7 @@ page BackToTopDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alwaysVisible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"round"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -76,7 +76,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Badge label="Active" humanize="true" size="sm" color="success" variant="soft" class="showcase-instance showcase-instance--1" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -98,7 +98,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Badge label="In review" humanize="true" size="sm" color="warning" variant="outline" class="showcase-instance showcase-instance--2" icon="" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="false" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -120,7 +120,7 @@ page BadgeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="badge-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Badge label="Verified" humanize="true" size="sm" color="primary" variant="solid" class="showcase-instance showcase-instance--3" icon="icon-[lucide--check]" dot="false" dotOnly="false" dotLabel="Status" animated="false" dismissible="true" dismissLabel="Remove badge" truncate="false" anchorLabel="" anchorIcon="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -46,7 +46,7 @@ page BlockquoteDetail {
|
||||
/></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>
|
||||
@@ -65,7 +65,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Blockquote citationTitle="Blockquote example" size="md" align="start" variant="default" quoteMark="true" italic="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -85,7 +85,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Blockquote citationTitle="Compact Blockquote" size="sm" align="center" variant="secondary" quoteMark="true" italic="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -107,7 +107,7 @@ page BlockquoteDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="blockquote-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Blockquote citationTitle="Advanced Blockquote" size="lg" align="end" variant="success" quoteMark="true" italic="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -121,7 +121,7 @@ page BlockquoteDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -285,7 +285,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Breadcrumb label="Breadcrumb" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Breadcrumb" homeHref="#breadcrumb-demo" size="small" variant="minimal" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimal page trail usage">
|
||||
@@ -327,7 +327,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Breadcrumb label="Compact example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Compact example" homeHref="#breadcrumb-demo" size="medium" variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Soft navigation trail usage">
|
||||
@@ -371,7 +371,7 @@ page BreadcrumbDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="breadcrumb-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Breadcrumb label="Advanced example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' separator="slash" showHome="true" homeLabel="Advanced example" homeHref="#breadcrumb-demo" size="large" variant="outline" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large directory breadcrumb usage">
|
||||
|
||||
@@ -96,7 +96,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -135,7 +135,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="sm" color="primary" variant="default" orientation="horizontal" responsive="false" attached="true" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -175,7 +175,7 @@ page ButtonGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ButtonGroup items='[{"label":"Day","value":"day"},{"label":"Week","value":"week"},{"label":"Month","value":"month"}]' value="week" size="md" color="primary" variant="default" orientation="horizontal" responsive="false" attached="false" selectable="true" toolbar="false" disabled="false" ariaLabel="Button group" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -78,7 +78,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Save & Submit" as="button" type="submit" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Primary action usage">
|
||||
@@ -99,7 +99,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Learn more" as="a" href="#button-demo" variant="outline" size="sm" icon="icon-[lucide--arrow-right]" iconPosition="end" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Secondary navigation usage">
|
||||
@@ -124,7 +124,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Upgrade plan" as="button" variant="secondary" size="lg" pill="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Prominent rounded action usage">
|
||||
@@ -147,7 +147,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Open settings" as="button" variant="ghost" size="icon" icon="icon-[lucide--settings]" ariaLabel="Open settings" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Accessible icon action usage">
|
||||
@@ -171,7 +171,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Delete project" as="button" variant="destructive" icon="icon-[lucide--trash-2]" class="showcase-instance showcase-instance--5" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dangerous action usage">
|
||||
@@ -193,7 +193,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Read documentation" as="a" href="#button-demo" variant="link" class="showcase-instance showcase-instance--6" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline action usage">
|
||||
@@ -215,7 +215,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Publish" loadingLabel="Publishing…" as="button" loading="true" class="showcase-instance showcase-instance--7" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pending action usage">
|
||||
@@ -237,7 +237,7 @@ page ButtonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="button-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Button label="Unavailable action" as="button" variant="outline" disabled="true" class="showcase-instance showcase-instance--8" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Unavailable action usage">
|
||||
|
||||
@@ -108,7 +108,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="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"><Card title="Citizen service" icon="" titleKey="" subtitle="" subtitleKey="" description="Access a trusted online service." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Structured content card usage">
|
||||
@@ -145,7 +145,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="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"><Card title="Open requests" icon="" titleKey="" subtitle="" subtitleKey="" description="Requests waiting for assignment." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="compact" color="primary" variant="soft" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><strong class="showcase-card-value">38</strong></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact dashboard card usage">
|
||||
@@ -184,7 +184,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="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"><Card title="Featured guide" icon="" titleKey="" subtitle="" subtitleKey="" description="A complete guide to public safety and emergency readiness." descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="lg" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><a href="#guide" class="showcase-action">Read guide</a></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Featured resource usage">
|
||||
@@ -222,7 +222,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="Design your next chapter" icon="" titleKey="" subtitle="" subtitleKey="" description="A practical guide to building thoughtful products." descriptionKey="" showHeader="true" showFooter="true" header="" footer="6 min read" imageSrc="/showcase-images/green-hero.svg" imageAlt="Green abstract cover" imagePosition="top" actionLabel="Read guide" actionLabelKey="" actionHref="#guide" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image with footer usage">
|
||||
@@ -263,7 +263,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="Your workspace is ready. Invite your teammates to get started." descriptionKey="" showHeader="true" showFooter="true" header="" footer="Updated just now" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Without a header usage">
|
||||
@@ -299,7 +299,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="" descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="/showcase-images/blue-mountain.svg" imageAlt="Blue geometric landscape" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image-only card usage">
|
||||
@@ -335,7 +335,7 @@ page CardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="card-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Card title="" icon="" titleKey="" subtitle="" subtitleKey="" description="" descriptionKey="" showHeader="true" showFooter="true" header="" footer="" imageSrc="" imageAlt="" imagePosition="top" actionLabel="" actionLabelKey="" actionHref="" headerActions='[]' navigation='[]' activeNav="" mobileNavigation="false" alertTitle="" alertDescription="" empty="false" emptyTitle="No data to show" emptyIcon="icon-[lucide--inbox]" items='[]' size="md" color="primary" variant="default" layout="vertical" align="left" hover="none" radius="default" shadow="default" equalHeight="false" scrollable="false" maxHeight="18rem" dismissible="false" ariaLabel="" class=""><div data-slot="header"><strong>Team invitation</strong></div><Input label="Email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Send invitation" /></div></Card></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom slots usage">
|
||||
|
||||
@@ -113,7 +113,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width, unframed usage">
|
||||
@@ -156,7 +156,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="true" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Framed gallery usage">
|
||||
@@ -200,7 +200,7 @@ page CarouselDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="carousel-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Carousel size="default" color="primary" title="" description="" items='[{"title":"A space to create","description":"Bring your next idea to life.","imageSrc":"/showcase-images/green-hero.svg"},{"title":"Made for teamwork","description":"Keep everyone moving together.","imageSrc":"/showcase-images/blue-mountain.svg"},{"title":"Room to grow","description":"Build something that matters.","imageSrc":"/showcase-images/violet-circle.svg"}]' activeIndex="0" slidesPerView="1" gap="0.75rem" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="true" isAutoHeight="false" isSnap="false" showCounter="true" thumbnails="none" ariaLabel="Product highlights" framed="false" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Draggable slides usage">
|
||||
|
||||
@@ -5,6 +5,9 @@ page ChartDetail {
|
||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "Completed tasks this week"
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Mon\",\"value\":24},{\"label\":\"Tue\",\"value\":38},{\"label\":\"Wed\",\"value\":29},{\"label\":\"Thu\",\"value\":52},{\"label\":\"Fri\",\"value\":45}]")
|
||||
state playground_data = JSON.parse(ctx.url.searchParams.get("pg_data") ?? "[]")
|
||||
state playground_labels = JSON.parse(ctx.url.searchParams.get("pg_labels") ?? "[]")
|
||||
state playground_datasets = JSON.parse(ctx.url.searchParams.get("pg_datasets") ?? "[]")
|
||||
state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "{}")
|
||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? ""
|
||||
state playground_valueKey = ctx.url.searchParams.get("pg_valueKey") ?? "value"
|
||||
state playground_labelKey = ctx.url.searchParams.get("pg_labelKey") ?? "label"
|
||||
@@ -15,6 +18,17 @@ page ChartDetail {
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "bar"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||
state demo_obj_0 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_1 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_2 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_3 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_4 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_5 = JSON.parse("{\"labels\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\"],\"datasets\":[{\"label\":\"Series A\",\"data\":[24,38,29,52,45]}]}")
|
||||
state demo_obj_6 = JSON.parse("{\"datasets\":[{\"label\":\"Observations\",\"data\":[{\"x\":1,\"y\":4},{\"x\":3,\"y\":8},{\"x\":5,\"y\":3}]}]}")
|
||||
state demo_obj_7 = JSON.parse("{\"datasets\":[{\"label\":\"Observations\",\"data\":[{\"x\":1,\"y\":4,\"r\":8},{\"x\":3,\"y\":8,\"r\":16},{\"x\":5,\"y\":3,\"r\":12}]}]}")
|
||||
state demo_obj_8 = JSON.parse("{\"labels\":[\"Jan\",\"Feb\",\"Mar\"],\"datasets\":[{\"type\":\"bar\",\"label\":\"Actual\",\"data\":[20,35,28]},{\"type\":\"line\",\"label\":\"Target\",\"data\":[25,30,40]}]}")
|
||||
state demo_obj_9 = JSON.parse("{\"labels\":[\"Jan\",\"Feb\",\"Mar\"],\"datasets\":[{\"label\":\"A\",\"data\":[20,35,28]},{\"label\":\"B\",\"data\":[25,30,40]}]}")
|
||||
state demo_obj_10 = JSON.parse("{\"indexAxis\":\"y\",\"scales\":{\"x\":{\"stacked\":true},\"y\":{\"stacked\":true}}}")
|
||||
seo {
|
||||
title = "Chart"
|
||||
description = "Theme-aware, responsive chart component."
|
||||
@@ -28,7 +42,7 @@ page ChartDetail {
|
||||
<span class="showcase-eyebrow">Integrations component</span>
|
||||
<h1>Chart</h1>
|
||||
<p>Theme-aware, responsive chart component.</p>
|
||||
<div class="detail-badges"><span>14 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>17 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
@@ -37,7 +51,7 @@ page ChartDetail {
|
||||
<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><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' data='{playground_data}' type='{playground_type}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Chart title='{playground_title}' description='{playground_description}' items='{playground_items}' data='{playground_data}' labels='{playground_labels}' datasets='{playground_datasets}' options='{playground_options}' type='{playground_type}' valueKey='{playground_valueKey}' labelKey='{playground_labelKey}' height='{playground_height}' showLegend='{playground_showLegend}' showValues='{playground_showValues}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<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>page ChartExample <span>{</span>
|
||||
@@ -63,13 +77,15 @@ page ChartDetail {
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]
|
||||
state data = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Weekly activity"
|
||||
description="Completed tasks this week"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
/>
|
||||
@@ -80,7 +96,7 @@ page ChartDetail {
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>14 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>17 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Weekly activity" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="Completed tasks this week" /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"label": "Mon",
|
||||
@@ -102,7 +118,7 @@ page ChartDetail {
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-data"><span><strong>data</strong><small>unknown[]</small></span><textarea id="playground-chart-data" name="pg_data" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-type"><span><strong>type</strong><small>string</small></span><select id="playground-chart-type" name="pg_type"><option value="" selected>Auto / default</option><option value="bar">bar</option><option value="line">line</option></select></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="220" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="" /></label></div>
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-data"><span><strong>data</strong><small>unknown</small></span><input id="playground-chart-data" name="pg_data" type="text" value="" /></label><label class="playground-field" for="playground-chart-labels"><span><strong>labels</strong><small>unknown[]</small></span><textarea id="playground-chart-labels" name="pg_labels" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-datasets"><span><strong>datasets</strong><small>unknown[]</small></span><textarea id="playground-chart-datasets" name="pg_datasets" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-options"><span><strong>options</strong><small>object</small></span><textarea id="playground-chart-options" name="pg_options" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-type"><span><strong>type</strong><small>string</small></span><select id="playground-chart-type" name="pg_type"><option value="" selected>Auto / default</option><option value="bar">bar</option><option value="line">line</option><option value="area">area</option><option value="pie">pie</option><option value="doughnut">doughnut</option><option value="radar">radar</option><option value="polarArea">polarArea</option><option value="scatter">scatter</option><option value="bubble">bubble</option></select></label><label class="playground-field" for="playground-chart-valueKey"><span><strong>value Key</strong><small>string</small></span><input id="playground-chart-valueKey" name="pg_valueKey" type="text" value="value" /></label><label class="playground-field" for="playground-chart-labelKey"><span><strong>label Key</strong><small>string</small></span><input id="playground-chart-labelKey" name="pg_labelKey" type="text" value="label" /></label><label class="playground-field" for="playground-chart-height"><span><strong>height</strong><small>number</small></span><input id="playground-chart-height" name="pg_height" type="number" value="220" /></label><label class="playground-toggle" for="playground-chart-showLegend"><span><strong>show Legend</strong><small>boolean</small></span><input id="playground-chart-showLegend" name="pg_showLegend" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chart-showValues"><span><strong>show Values</strong><small>boolean</small></span><input id="playground-chart-showValues" name="pg_showValues" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="bar" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -111,50 +127,53 @@ page ChartDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Bar chart</h2><p>Pass an array of label/value objects through data.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Bar chart</h2><p>Chart.js bars with positive and negative values.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Weekly signups" description="Completed tasks this week" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample weekly changes" description="Sample data" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":-12},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' labels='[]' datasets='[]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bar chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state data = [
|
||||
<span>{</span>
|
||||
"label": "Mon",
|
||||
"value": 24
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Tue",
|
||||
"value": 38
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Wed",
|
||||
"value": 29
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Thu",
|
||||
"value": 52
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Weekly signups"
|
||||
description="Completed tasks this week"
|
||||
title="Sample weekly changes"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
data='[
|
||||
<span>{</span>
|
||||
"label": "Mon",
|
||||
"value": 24
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Tue",
|
||||
"value": -12
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Wed",
|
||||
"value": 29
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Thu",
|
||||
"value": 52
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Fri",
|
||||
"value": 45
|
||||
<span>}</span>
|
||||
]'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
@@ -163,46 +182,566 @@ page ChartDetail {
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>Line chart</h2><p>Use type=line to compare a trend over time.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>line chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Monthly revenue" description="Completed tasks this week" items='[]' data='[{"label":"Jan","value":20},{"label":"Feb","value":35},{"label":"Mar","value":28},{"label":"Apr","value":55}]' type="line" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample line" description="Sample data" items='[]' data='{demo_obj_0}' labels='[]' datasets='[]' type="line" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Line chart usage">
|
||||
<section class="demo-code" aria-label="line chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state data = [
|
||||
<span>{</span>
|
||||
"label": "Jan",
|
||||
"value": 20
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Feb",
|
||||
"value": 35
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Mar",
|
||||
"value": 28
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Apr",
|
||||
"value": 55
|
||||
<span>}</span>
|
||||
]
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Monthly revenue"
|
||||
description="Completed tasks this week"
|
||||
title="Sample line"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data="<span>{</span>data<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="line"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>area chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample area" description="Sample data" items='[]' data='{demo_obj_1}' labels='[]' datasets='[]' type="area" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="area chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample area"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="area"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>pie chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">04</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample pie" description="Sample data" items='[]' data='{demo_obj_2}' labels='[]' datasets='[]' type="pie" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="pie chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample pie"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="pie"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>doughnut chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">05</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample doughnut" description="Sample data" items='[]' data='{demo_obj_3}' labels='[]' datasets='[]' type="doughnut" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="doughnut chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample doughnut"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="doughnut"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>radar chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">06</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample radar" description="Sample data" items='[]' data='{demo_obj_4}' labels='[]' datasets='[]' type="radar" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="radar chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample radar"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="radar"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>polarArea chart</h2><p>Rendered by Chart.js with native tooltips and legend interactions.</p></div>
|
||||
<span class="demo-case-number">07</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample polarArea" description="Sample data" items='[]' data='{demo_obj_5}' labels='[]' datasets='[]' type="polarArea" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="polarArea chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample polarArea"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Series A",
|
||||
"data": [
|
||||
24,
|
||||
38,
|
||||
29,
|
||||
52,
|
||||
45
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="polarArea"
|
||||
height="220"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Scatter chart</h2><p>Pass native x/y coordinates without flattening them.</p></div>
|
||||
<span class="demo-case-number">08</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample coordinates" description="Sample data" items='[]' data='{demo_obj_6}' labels='[]' datasets='[]' type="scatter" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Scatter chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample coordinates"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Observations",
|
||||
"data": [
|
||||
<span>{</span>
|
||||
"x": 1,
|
||||
"y": 4
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 3,
|
||||
"y": 8
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 5,
|
||||
"y": 3
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="scatter"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Bubble chart</h2><p>Native x/y/r points preserve bubble radii.</p></div>
|
||||
<span class="demo-case-number">09</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample bubbles" description="Sample data" items='[]' data='{demo_obj_7}' labels='[]' datasets='[]' type="bubble" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bubble chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample bubbles"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "Observations",
|
||||
"data": [
|
||||
<span>{</span>
|
||||
"x": 1,
|
||||
"y": 4,
|
||||
"r": 8
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 3,
|
||||
"y": 8,
|
||||
"r": 16
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"x": 5,
|
||||
"y": 3,
|
||||
"r": 12
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bubble"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Mixed chart</h2><p>Set each dataset's type and pass native Chart.js options.</p></div>
|
||||
<span class="demo-case-number">010</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample mixed chart" description="Sample data" items='[]' data='{demo_obj_8}' labels='[]' datasets='[]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Mixed chart usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample mixed chart"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"type": "bar",
|
||||
"label": "Actual",
|
||||
"data": [
|
||||
20,
|
||||
35,
|
||||
28
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"type": "line",
|
||||
"label": "Target",
|
||||
"data": [
|
||||
25,
|
||||
30,
|
||||
40
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Horizontal stacked bars</h2><p>Configure indexAxis and stacked scales through options.</p></div>
|
||||
<span class="demo-case-number">011</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="chart-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Chart title="Sample stacked chart" description="Sample data" items='[]' data='{demo_obj_9}' labels='[]' datasets='[]' options='{demo_obj_10}' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal stacked bars usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code>page ChartExample <span>{</span>
|
||||
state items = []
|
||||
state labels = []
|
||||
state datasets = []
|
||||
view <span>{</span>
|
||||
<Chart
|
||||
title="Sample stacked chart"
|
||||
description="Sample data"
|
||||
items="<span>{</span>items<span>}</span>"
|
||||
data='<span>{</span>
|
||||
"labels": [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar"
|
||||
],
|
||||
"datasets": [
|
||||
<span>{</span>
|
||||
"label": "A",
|
||||
"data": [
|
||||
20,
|
||||
35,
|
||||
28
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "B",
|
||||
"data": [
|
||||
25,
|
||||
30,
|
||||
40
|
||||
]
|
||||
<span>}</span>
|
||||
]
|
||||
<span>}</span>'
|
||||
labels="<span>{</span>labels<span>}</span>"
|
||||
datasets="<span>{</span>datasets<span>}</span>"
|
||||
options='<span>{</span>
|
||||
"indexAxis": "y",
|
||||
"scales": <span>{</span>
|
||||
"x": <span>{</span>
|
||||
"stacked": true
|
||||
<span>}</span>,
|
||||
"y": <span>{</span>
|
||||
"stacked": true
|
||||
<span>}</span>
|
||||
<span>}</span>
|
||||
<span>}</span>'
|
||||
type="bar"
|
||||
height="220"
|
||||
showLegend="false"
|
||||
showValues="false"
|
||||
/>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre>
|
||||
@@ -228,10 +767,10 @@ if (component) registerOutputHandler(component, "dataPointClick", (payload) =>
|
||||
if (component) registerOutputHandler(component, "legendToggle", (payload) => <span>{</span>
|
||||
console.log("legendToggle", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>data</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>data</code></td><td>unknown</td><td><code>undefined</code></td><td>No</td></tr><tr><td><code>labels</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>datasets</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>object</td><td><code><span>{</span><span>}</span></code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>valueKey</code></td><td>string</td><td><code>"value"</code></td><td>No</td></tr><tr><td><code>labelKey</code></td><td>string</td><td><code>"label"</code></td><td>No</td></tr><tr><td><code>height</code></td><td>number</td><td><code>240</code></td><td>No</td></tr><tr><td><code>showLegend</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValues</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"bar"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Bar chart</a><a href="#chart-demo-2">Line chart</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Bar chart</a><a href="#chart-demo-2">line chart</a><a href="#chart-demo-3">area chart</a><a href="#chart-demo-4">pie chart</a><a href="#chart-demo-5">doughnut chart</a><a href="#chart-demo-6">radar chart</a><a href="#chart-demo-7">polarArea chart</a><a href="#chart-demo-8">Scatter chart</a><a href="#chart-demo-9">Bubble chart</a><a href="#chart-demo-10">Mixed chart</a><a href="#chart-demo-11">Horizontal stacked bars</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -153,7 +153,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -221,7 +221,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -289,7 +289,7 @@ page ChatBubbleDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ChatBubble size="default" color="primary" title="" description="" items='[{"text":"Hi Maya, is the new dashboard ready to review?","direction":"incoming","timestamp":"10:24"},{"text":"Yes! I have shared the latest version with you.","direction":"outgoing","timestamp":"10:25","receipt":"read"},{"text":"Thanks, I will take a look this afternoon.","direction":"incoming","timestamp":"10:26"},{"text":"Great. The release notes are attached too.","direction":"outgoing","timestamp":"10:27","receipt":"delivered"},{"text":"One more screenshot coming up.","direction":"outgoing","timestamp":"10:28","receipt":"sent"},{"text":"Uploading the final export now.","direction":"outgoing","timestamp":"10:29","receipt":"sending"},{"text":"Here is the invoice PDF.","direction":"outgoing","timestamp":"10:30","receipt":"failed","status":"Not delivered","actionLabel":"Retry"}]' oneSided="false" showAvatars="false" showMetadata="true" ariaLabel="Conversation" variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -514,7 +514,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-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"><Checkbox size="default" label="Checkbox" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" values='[{"id":"checkbox-0-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-0-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -756,7 +756,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-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"><Checkbox size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" values='[{"id":"checkbox-1-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-1-2","key":"checkbox-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-1-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-1-2","key":"checkbox-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -1002,7 +1002,7 @@ page CheckboxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="checkbox-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"><Checkbox size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" values='[{"id":"checkbox-2-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-2-2","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-2-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-2-2","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -62,7 +62,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="false" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -81,7 +81,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -101,7 +101,7 @@ page ClipboardDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="clipboard-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Clipboard value="npm install @wrnexus/ui" label="Copy" copiedLabel="Copied" errorLabel="Copy failed" title="" description="" iconOnly="true" code="true" size="default" color="primary" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -494,7 +494,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-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"><Collapse size="default" items='[{"id":"collapse-0-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-0-2","key":"collapse-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-0-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-0-2","key":"collapse-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 1 example" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -735,7 +735,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-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"><Collapse size="sm" items='[{"id":"collapse-1-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-1-2","key":"collapse-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-1-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-1-2","key":"collapse-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 2 example" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -977,7 +977,7 @@ page CollapseDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="collapse-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"><Collapse size="lg" items='[{"id":"collapse-2-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-2-2","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-2-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-2-2","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 3 example" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -71,7 +71,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#8b5cf6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -92,7 +92,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#14b8a6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -113,7 +113,7 @@ page ColorPickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="color-picker-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ColorPicker size="default" color="primary" id="" name="brand-color" label="Brand color" hiddenLabel="false" placeholder="" value="#3b82f6" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -35,7 +35,7 @@ page ColumnsDetail {
|
||||
<pre><code data-playground-code><Columns /></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>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -54,7 +54,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Columns size="default" columns="2" gap="lg" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Two-column content layout usage">
|
||||
@@ -74,7 +74,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Columns size="compact" columns="3" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Three compact columns usage">
|
||||
@@ -97,7 +97,7 @@ page ColumnsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="columns-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Columns size="lg" columns="4" gap="md" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div></Columns></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width four columns usage">
|
||||
@@ -111,7 +111,7 @@ page ColumnsDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -165,7 +165,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default autocomplete usage">
|
||||
@@ -226,7 +226,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Local HTML options" name="combobox-2" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Local HTML options usage">
|
||||
@@ -287,7 +287,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped suggestions usage">
|
||||
@@ -358,7 +358,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimum search length usage">
|
||||
@@ -420,7 +420,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search result limit usage">
|
||||
@@ -482,7 +482,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Starts-with matching usage">
|
||||
@@ -544,7 +544,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
||||
@@ -605,7 +605,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with icons usage">
|
||||
@@ -667,7 +667,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with avatars usage">
|
||||
@@ -729,7 +729,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with color indicators usage">
|
||||
@@ -791,7 +791,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Clearable value" name="combobox-11" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Clearable value usage">
|
||||
@@ -852,7 +852,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Custom text values" name="combobox-12" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom text values usage">
|
||||
@@ -914,7 +914,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Preselected value" name="combobox-13" value="engineering" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Preselected value usage">
|
||||
@@ -976,7 +976,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled combobox usage">
|
||||
@@ -1038,7 +1038,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation state usage">
|
||||
@@ -1100,7 +1100,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data with automatic preload usage">
|
||||
@@ -1164,7 +1164,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-17" class="demo-canvas demo-canvas--17">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote search API usage">
|
||||
@@ -1228,7 +1228,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-18" class="demo-canvas demo-canvas--18">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote query parameters usage">
|
||||
@@ -1292,7 +1292,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-19" class="demo-canvas demo-canvas--19">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Infinite remote suggestions usage">
|
||||
@@ -1358,7 +1358,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-20" class="demo-canvas demo-canvas--20">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed-position suggestions usage">
|
||||
@@ -1420,7 +1420,7 @@ page ComboBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="combo-box-demo-21" class="demo-canvas demo-canvas--21">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="JavaScript methods usage">
|
||||
|
||||
@@ -60,7 +60,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -81,7 +81,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -102,7 +102,7 @@ page ConfettiDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="confetti-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Confetti label="Celebrate milestone" duration="1400" count="40" autoStart="false" disabled="false" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -38,7 +38,7 @@ page ContainerDetail {
|
||||
</Container></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>
|
||||
@@ -57,7 +57,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Container size="default" columns="2" maxWidth="xl" centered="true" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard content container usage">
|
||||
@@ -76,7 +76,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Container size="compact" columns="2" maxWidth="compact" centered="true" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact reading container usage">
|
||||
@@ -97,7 +97,7 @@ page ContainerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="container-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Container size="spacious" columns="2" maxWidth="full" centered="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width layout container usage">
|
||||
@@ -110,7 +110,7 @@ page ContainerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -36,7 +36,7 @@ page CustomScrollbarDetail {
|
||||
<pre><code data-playground-code><CustomScrollbar /></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>
|
||||
@@ -55,7 +55,7 @@ page CustomScrollbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><CustomScrollbar size="default" axis="vertical" thickness="8" maxHeight="14rem" radius="999px" class="showcase-instance showcase-instance--1"><div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Themed scrolling region usage">
|
||||
@@ -75,7 +75,7 @@ page CustomScrollbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="custom-scrollbar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><CustomScrollbar color="info" size="sm" axis="horizontal" thickness="14" maxHeight="8rem" radius="4px" class="showcase-instance showcase-instance--2"><div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div></CustomScrollbar></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal, thicker track usage">
|
||||
@@ -92,7 +92,7 @@ page CustomScrollbarDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>axis</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>thickness</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>maxHeight</code></td><td>string</td><td><code>"20rem"</code></td><td>No</td></tr><tr><td><code>radius</code></td><td>string</td><td><code>"999px"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -114,7 +114,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -165,7 +165,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -216,7 +216,7 @@ page DataMapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-map-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataMap size="default" color="primary" title="Activity by team" description="Select a tile to inspect its activity score." items='[{"label":"Design","value":32},{"label":"Engineering","value":84},{"label":"Support","value":56},{"label":"Sales","value":45},{"label":"Marketing","value":68},{"label":"Operations","value":20}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -531,7 +531,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-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"><DataTable size="default" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "TeLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sortable, searchable and paged usage">
|
||||
@@ -738,7 +738,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-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"><DataTable size="sm" columns="[{"key": "owner", "label": "From", "sortable": true}, {"key": "name", "label": "Subject", "sortable": true}, {"key": "plan", "label": "Folder", "align": "center"}, {"key": "statusHtml", "label": "State", "align": "center", "html": true}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, &quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Bulk actions on selection usage">
|
||||
@@ -968,7 +968,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-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"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Numbered pagination usage">
|
||||
@@ -1176,7 +1176,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "statusHtml", "label": "Status", "align": "center", "html": true}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", &quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full gridlines and custom cell markup usage">
|
||||
@@ -1386,7 +1386,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true, "width": "40%"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true, "width": "20%"}, {"key": "plan", "label": "Plan", "align": "center", "width": "20%"}, {"key": "status", "label": "Status", "align": "end", "width": "20%"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id":Line truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed widths and alignment usage">
|
||||
@@ -1595,7 +1595,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Plan"}, {"key": "plan", "label": "Tier"}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "type": "number"}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", &qLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Comparison layout usage">
|
||||
@@ -1802,7 +1802,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sticky first column usage">
|
||||
@@ -2010,7 +2010,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\"showcase-pill showcase-pill--info\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\"showcase-pill showcase-pill--danger\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\"showcase-pill showcase-pill--success\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team&quLine truncated
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact density, no pagination usage">
|
||||
@@ -2221,7 +2221,7 @@ page DataTableDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="data-table-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DataTable size="lg" columns="[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]" rows="[]" remote="false" loadingLabel="Advanced example" errorLabel="Advanced example" retryLabel="Advanced example" caption="Accounts" description="A richer configuration demonstrating additional content and hierarchy." searchable="true" searchPlaceholder="Enter a sample value" paginated="true" pageSize="35" pageSizes='[5,10,25]' selectable="false" actions='[]' striped="true" bordered="true" emptyLabel="No accounts match this filter yet" noResultsLabel="Advanced example" clearSearchLabel="Advanced example" stickyFirstColumn="false" class="showcase-instance showcase-instance--9" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Empty state usage">
|
||||
|
||||
@@ -264,7 +264,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DatePicker size="default" label="Start date" name="start-date" value="2026-09-20" placeholder="Enter a sample value" type="date" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Date picker usage">
|
||||
@@ -385,7 +385,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DatePicker size="sm" label="Schedule for" name="schedule" value="2026-09-20T09:30" placeholder="Enter a sample value" type="datetime-local" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Date and time usage">
|
||||
@@ -509,7 +509,7 @@ page DatePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="date-picker-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DatePicker size="lg" label="Scheduled date" value="2026-09-22" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" months='[{"label":"Jan","value":"01"},{"label":"Feb","value":"02"},{"label":"Mar","value":"03"},{"label":"Apr","value":"04"},{"label":"May","value":"05"},{"label":"Jun","value":"06"},{"label":"Jul","value":"07"},{"label":"Aug","value":"08"},{"label":"Sep","value":"09"},{"label":"Oct","value":"10"},{"label":"Nov","value":"11"},{"label":"Dec","value":"12"}]' days='[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]' years='[2024,2025,2026,2027,2028,2029,2030]' variant="success" inline="false" readonly="true" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled date usage">
|
||||
|
||||
@@ -286,7 +286,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DeviceFrame size="default" title="Device Frame example" description="A polished default device frame for a modern application." items='[{"id":"device-frame-0-1","key":"device-frame-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"device-frame-0-2","key":"device-frame-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -420,7 +420,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DeviceFrame size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"device-frame-1-1","key":"device-frame-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"device-frame-1-2","key":"device-frame-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -556,7 +556,7 @@ page DeviceFrameDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="device-frame-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DeviceFrame size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"device-frame-2-1","key":"device-frame-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"device-frame-2-2","key":"device-frame-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -37,7 +37,7 @@ page DividerDetail {
|
||||
/></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>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -56,7 +56,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Divider size="default" label="Related information" orientation="horizontal" variant="solid" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal section divider usage">
|
||||
@@ -75,7 +75,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Divider size="sm" label="" orientation="horizontal" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimal unlabeled divider usage">
|
||||
@@ -95,7 +95,7 @@ page DividerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="divider-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Divider size="lg" color="info" label="Actions" orientation="vertical" variant="success" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical toolbar divider usage">
|
||||
@@ -110,7 +110,7 @@ page DividerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -90,7 +90,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -129,7 +129,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -168,7 +168,7 @@ page DragAndDropDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="drag-and-drop-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><DragAndDrop size="default" color="primary" title="Project priorities" description="Drag to reorder, or use the arrow buttons." items='[{"label":"Review designs"},{"label":"Build the dashboard"},{"label":"Test accessibility"},{"label":"Prepare release notes"}]' variant="default" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page DrawflowCanvasDetail {
|
||||
layout = "showcase"
|
||||
state playground_nodes = JSON.parse(ctx.url.searchParams.get("pg_nodes") ?? "[]")
|
||||
state playground_toolbar = (ctx.url.searchParams.get("pg_toolbar") ?? "true") === "true"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Drawflow Canvas"
|
||||
description = "Reusable drawflow canvas component."
|
||||
}
|
||||
view {
|
||||
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
||||
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Drawflow Canvas</span>
|
||||
</nav>
|
||||
<header class="detail-hero">
|
||||
<div class="detail-hero-copy">
|
||||
<span class="showcase-eyebrow">Core component</span>
|
||||
<h1>Drawflow Canvas</h1>
|
||||
<p>Reusable drawflow canvas component.</p>
|
||||
<div class="detail-badges"><span>3 props</span><span>0 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="DrawflowCanvas" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="select,connect,move,add">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Drawflow Canvas</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><DrawflowCanvas nodes='{playground_nodes}' toolbar='{playground_toolbar}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>3 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-drawflow-canvas-nodes"><span><strong>nodes</strong><small>string</small></span><textarea id="playground-drawflow-canvas-nodes" name="pg_nodes" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-drawflow-canvas-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-drawflow-canvas-toolbar" name="pg_toolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-drawflow-canvas-class"><span><strong>class</strong><small>string</small></span><input id="playground-drawflow-canvas-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="drawflow-canvas-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"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><DrawflowCanvas /></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="drawflow-canvas-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"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><DrawflowCanvas /></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="drawflow-canvas-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"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><DrawflowCanvas /></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@connect</code><span>Fires when the component emits the connect event.</span></div><div><code>@move</code><span>Fires when the component emits the move event.</span></div><div><code>@add</code><span>Fires when the component emits the add event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><DrawflowCanvas
|
||||
@select='console.log(payload)'
|
||||
@connect='console.log(payload)'
|
||||
@move='console.log(payload)'
|
||||
@add='console.log(payload)'
|
||||
/></code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>{</span> registerOutputHandler <span>}</span> from "@wrnexus/csr/outputs"
|
||||
|
||||
const component = document.querySelector("[data-ui-component=\"DrawflowCanvas\"], [data-component=\"DrawflowCanvas\"]")
|
||||
|
||||
if (component) registerOutputHandler(component, "select", (payload) => <span>{</span>
|
||||
console.log("select", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "connect", (payload) => <span>{</span>
|
||||
console.log("connect", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "move", (payload) => <span>{</span>
|
||||
console.log("move", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "add", (payload) => <span>{</span>
|
||||
console.log("add", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>nodes</code></td><td>string</td><td><code>[] palette=[] activeNode="" label="Workflow" arrangeLabel="Arrange nodes" connectLabel="Connect" color="primary" size="default"</code></td><td>No</td></tr><tr><td><code>toolbar</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="#drawflow-canvas-demo-1">Production default</a><a href="#drawflow-canvas-demo-2">Compact application</a><a href="#drawflow-canvas-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/flow-canvas"><small>Next</small><strong>Flow Canvas →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileInput size="default" name="attachment" label="Attachment" hiddenLabel="false" placeholder="Choose a file" value="" icon="" accept=".pdf,image/*" multiple="false" helperText="PDF or image" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Choose a document usage">
|
||||
@@ -95,7 +95,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileInput size="sm" name="attachments" label="Attachments" hiddenLabel="false" placeholder="Choose files" value="" icon="icon-[lucide--arrow-right]" multiple="true" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Multiple attachments usage">
|
||||
@@ -120,7 +120,7 @@ page FileInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileInput size="lg" name="disabled-file" label="Attachment" hiddenLabel="false" placeholder="Uploads unavailable" value="" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="true" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled upload usage">
|
||||
|
||||
@@ -67,7 +67,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="2.4 MB" status="uploading" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -89,7 +89,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="50" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="error" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -111,7 +111,7 @@ page FileUploadProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="file-upload-progress-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><FileUploadProgress size="default" color="primary" label="Upload progress" value="100" max="100" showValue="true" fileName="brand-guidelines.pdf" fileSize="4.8 MB" uploadedSize="" status="complete" cancelLabel="Cancel upload" retryLabel="Retry upload" showCompleteAction="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -36,7 +36,7 @@ page GridDetail {
|
||||
<pre><code data-playground-code><Grid /></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>
|
||||
@@ -55,7 +55,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Grid size="default" columns="3" gap="md" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Responsive three-column grid usage">
|
||||
@@ -75,7 +75,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Grid size="compact" columns="4" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dense four-column grid usage">
|
||||
@@ -98,7 +98,7 @@ page GridDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="grid-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Grid size="spacious" columns="2" gap="xl" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div></Grid></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width two-column grid usage">
|
||||
@@ -112,7 +112,7 @@ page GridDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -39,7 +39,7 @@ page ImageDetail {
|
||||
<pre><code data-playground-code><Image /></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>
|
||||
@@ -58,7 +58,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Responsive content image usage">
|
||||
@@ -80,7 +80,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Image size="sm" src="/showcase-images/blue-mountain.svg" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rounded thumbnail usage">
|
||||
@@ -104,7 +104,7 @@ page ImageDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="image-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Image size="lg" src="/showcase-images/green-hero.svg" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Eager hero image usage">
|
||||
@@ -121,7 +121,7 @@ page ImageDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>fit</code></td><td>string</td><td><code>"cover"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -77,7 +77,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="https://" endText=".example.com" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -100,7 +100,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="icon-[lucide--search]" iconPosition="start" actionLabel="Search" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -123,7 +123,7 @@ page InputGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputGroup size="default" color="primary" id="" name="workspace-url" label="Workspace address" hiddenLabel="false" value="" placeholder="your-team" type="text" startText="" endText="" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -94,7 +94,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default controls usage">
|
||||
@@ -117,7 +117,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Labeled input style usage">
|
||||
@@ -142,7 +142,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical buttons usage">
|
||||
@@ -167,7 +167,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal buttons usage">
|
||||
@@ -191,7 +191,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact size usage">
|
||||
@@ -214,7 +214,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Seat quantity selector usage">
|
||||
@@ -239,7 +239,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="disabled-input" value="10" inputDisabled="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled input usage">
|
||||
@@ -261,7 +261,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled buttons usage">
|
||||
@@ -283,7 +283,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom step size usage">
|
||||
@@ -306,7 +306,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="negative-values" value="-10" min="-100" max="100" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Negative values usage">
|
||||
@@ -329,7 +329,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="maximum-limit" value="10" min="0" max="10" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Maximum limit usage">
|
||||
@@ -352,7 +352,7 @@ page InputNumberDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-number-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><InputNumber size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation states usage">
|
||||
|
||||
@@ -80,7 +80,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Input size="default" label="Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -100,7 +100,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Input size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -124,7 +124,7 @@ page InputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="input-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Input size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -35,7 +35,7 @@ page KbdDetail {
|
||||
/></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>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -54,7 +54,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Kbd size="default" color="primary" label="⌘ K" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -73,7 +73,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Kbd size="default" color="primary" label="Esc" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -92,7 +92,7 @@ page KbdDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="kbd-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Kbd size="default" color="primary" label="Ctrl + Enter" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -103,7 +103,7 @@ page KbdDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -63,7 +63,7 @@ page LayoutSplitterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><LayoutSplitter size="40" orientation="horizontal" minSize="20" step="5" label="Resize panels" class="showcase-instance showcase-instance--1"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Drag or arrow the divider usage">
|
||||
@@ -89,7 +89,7 @@ page LayoutSplitterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="layout-splitter-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><LayoutSplitter size="60" orientation="vertical" minSize="25" step="10" label="Resize rows" class="showcase-instance showcase-instance--2"><div data-slot="start"><h3>Project files</h3><p>Drag the divider to resize these panels.</p></div><div data-slot="end"><h3>Editor</h3><p>Your selected file appears here.</p></div></LayoutSplitter></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Stacked panes usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page LegendIndicatorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="legend-indicator-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><LegendIndicator size="default" title="Traffic sources" description="Select a source to toggle its visibility." items='[{"label":"Direct","color":"#8b5cf6","value":"42%"},{"label":"Search","color":"#14b8a6","value":"35%"},{"label":"Referral","color":"#f59e0b","value":"23%"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Chart legend usage">
|
||||
|
||||
@@ -40,7 +40,7 @@ page LinkDetail {
|
||||
/></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>
|
||||
@@ -59,7 +59,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard navigation link usage">
|
||||
@@ -79,7 +79,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Link size="sm" label="WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="External resource link usage">
|
||||
@@ -102,7 +102,7 @@ page LinkDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="link-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Link size="lg" color="info" label="Explore framework guides" href="/framework-guides" external="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large emphasized link usage">
|
||||
@@ -116,7 +116,7 @@ page LinkDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>underline</code></td><td>string</td><td><code>"hover"</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -105,7 +105,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -151,7 +151,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -197,7 +197,7 @@ page ListGroupDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><ListGroup size="default" color="primary" title="Workspace" description="" items='[{"value":"inbox","label":"Inbox","description":"Messages that need your attention","icon":"icon-[lucide--inbox]","badge":"8"},{"value":"projects","label":"Projects","description":"Your team\u0027s active work","icon":"icon-[lucide--folder]"},{"value":"archive","label":"Archive","description":"Completed conversations","icon":"icon-[lucide--archive]"}]' variant="default" value="inbox" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><List size="default" title="Citizen resources" description="Commonly requested public information." items='[{"label":"Report crime","href":"#report","icon":"icon-[lucide--shield-alert]"},{"label":"Track complaint","href":"#track","icon":"icon-[lucide--scan-search]"},{"label":"Certificates","href":"#certificates","icon":"icon-[lucide--file-check-2]"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Linked resource list usage">
|
||||
@@ -320,7 +320,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><List size="sm" title="Current status" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"Application received","status":"Complete"},{"label":"Verification","status":"In progress"},{"label":"Decision","status":"Pending"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact status list usage">
|
||||
@@ -361,7 +361,7 @@ page ListDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="list-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><List size="lg" title="Service requests" description="Recent requests and their current status." items='[{"label":"Address verification","description":"Submitted yesterday","status":"Review","href":"#request-1"},{"label":"Character certificate","description":"Submitted 3 days ago","status":"Approved","href":"#request-2"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich action list usage">
|
||||
|
||||
@@ -180,7 +180,7 @@ page MapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="map-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Map size="default" title="Bengaluru" description="Pan and zoom to explore the city" items='[]' variant="default" provider="openstreetmap" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="OpenStreetMap usage">
|
||||
@@ -206,7 +206,7 @@ page MapDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="map-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Map size="sm" title="Google Maps" description="A compact configuration for dashboards and dense product surfaces." items='[]' variant="secondary" provider="google" apiKey="" query="Bengaluru" latitude="12.9716" longitude="77.5946" zoomLevel="13" imageSrc="" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Google Maps usage">
|
||||
|
||||
@@ -278,7 +278,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Marquee size="default" title="Supported capabilities" description="A polished default marquee for a modern application." items='[{"label":"SSR"},{"label":"CSR"},{"label":"Themes"},{"label":"Accessibility"},{"label":"Responsive UI"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Partner and capability strip usage">
|
||||
@@ -320,7 +320,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Marquee size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"All services operational"},{"label":"New components published"},{"label":"Documentation updated"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact announcement ticker usage">
|
||||
@@ -358,7 +358,7 @@ page MarqueeDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="marquee-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Marquee size="lg" color="info" title="Built for complete digital platforms" description="A richer configuration demonstrating additional content and hierarchy." items='[{"label":"Public portals","icon":"icon-[lucide--landmark]"},{"label":"Enterprise systems","icon":"icon-[lucide--building-2]"},{"label":"Developer tools","icon":"icon-[lucide--code-2]"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large visual marquee usage">
|
||||
|
||||
@@ -617,7 +617,7 @@ page MegaMenuDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-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"><MegaMenu size="default" label="Products" icon="icon-[lucide--box]" columns='[{"heading":"Platform","items":[{"label":"Runtime","href":"/runtime","description":"The browser half of the framework."},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript."}]},{"heading":"Tooling","items":[{"label":"CLI","href":"/cli","description":"Scaffold, build and deploy."},{"label":"Editor","href":"/editor","description":"Language server and syntax."}]}]' rail='[{"id":"mega-menu-0-1","key":"mega-menu-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":"#mega-menu-demo","actionHref":"#mega-menu-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":"mega-menu-0-2","key":"mega-menu-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-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"]}]' featured='{demo_obj_0}' variant="default" columnCount="3" fullWidth="false" openOnHover="true" actionLabel="Mega Menu" actionHref="#mega-menu-demo" defaultOpen="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped columns usage">
|
||||
@@ -839,7 +839,7 @@ page MegaMenuDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-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"><MegaMenu size="sm" label="Solutions" icon="icon-[lucide--arrow-right]" columns='[{"heading":"By team","items":[{"label":"Engineering","href":"/eng","icon":"icon-[lucide--code]"},{"label":"Design","href":"/design","icon":"icon-[lucide--palette]"},{"label":"Support","href":"/support","icon":"icon-[lucide--life-buoy]"}]},{"heading":"By size","items":[{"label":"Startup","href":"/startup"},{"label":"Enterprise","href":"/enterprise"}]}]' rail='[{"id":"mega-menu-1-1","key":"mega-menu-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":"#mega-menu-demo","actionHref":"#mega-menu-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":"mega-menu-1-2","key":"mega-menu-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-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"]}]' featured='{demo_obj_1}' variant="secondary" columnCount="7" fullWidth="false" openOnHover="true" actionLabel="Compact example" actionHref="#mega-menu-demo" footer="Not sure where to start? Talk to us." defaultOpen="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="With a footer note usage">
|
||||
|
||||
@@ -88,7 +88,7 @@ page MetricCardDetail {
|
||||
<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"><MetricCard label="Availability" value="99.9" description="Target service availability." icon="icon-[lucide--activity]" suffix="%" trend="Stable" trendLabel="30 days" trendDirection="positive" progress="-1" progressLabel="Metric Card" href="#status" external="false" actionLabel="Open status" showArrow="true" selectable="false" disabled="false" size="default" color="success" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Operational KPI usage">
|
||||
@@ -122,7 +122,7 @@ page MetricCardDetail {
|
||||
<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"><MetricCard label="Profile completion" value="72" description="Complete the remaining account and security steps." icon="icon-[lucide--circle-user-round]" suffix="%" trendLabel="Compact example" progress="72" progressLabel="Account setup" href="#metric-card-demo" external="false" actionLabel="Compact example" showArrow="true" selectable="false" disabled="false" size="sm" color="info" variant="soft" align="center" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Progress metric usage">
|
||||
@@ -157,7 +157,7 @@ page MetricCardDetail {
|
||||
<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"><MetricCard label="Open complaints" value="38" description="Cases waiting for review or assignment." icon="icon-[lucide--inbox]" badge="Needs review" trendLabel="Advanced example" progress="-1" progressLabel="Advanced example" href="#queue" external="false" actionLabel="Review queue" showArrow="true" selectable="true" disabled="false" size="lg" color="warning" variant="raised" hover="glow" align="end" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Selectable dashboard metric usage">
|
||||
|
||||
@@ -280,7 +280,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Nav size="default" items='[{"label":"Home","href":"/","value":"home","icon":"icon-[lucide--house]"},{"label":"Inbox","href":"/inbox","value":"inbox","badge":"9"},{"label":"Reports","href":"/reports","value":"reports"},{"label":"Archive","href":"/archive","value":"archive","disabled":true}]' active="inbox" label="Nav" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal links usage">
|
||||
@@ -331,7 +331,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Nav size="sm" items='[{"label":"Home","href":"/","value":"home"},{"label":"Products","value":"products","items":[{"label":"Overview","href":"/p","value":"p-overview"},{"label":"Platform","value":"p-platform","items":[{"label":"Runtime","href":"/p/runtime","value":"runtime"},{"label":"Compiler","href":"/p/compiler","value":"compiler"}]}]}]' active="p-overview" label="Compact example" collapsible="true" toggleLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Nested submenus usage">
|
||||
@@ -392,7 +392,7 @@ page NavDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Nav size="lg" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"label":"Team","href":"/team","value":"team","icon":"icon-[lucide--users]"},{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]' active="team" orientation="vertical" label="Advanced example" collapsible="false" toggleLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical rail usage">
|
||||
|
||||
@@ -630,7 +630,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Navbar size="default" label="Primary navigation" topbarLabel="Navbar" brand='{demo_obj_0}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Projects","href":"/projects","value":"projects"},{"label":"Reports","href":"/reports","value":"reports"}]' actions='[{"label":"Sign in","href":"/login","variant":"link"},{"label":"Start free","href":"/signup","variant":"primary"}]' active="projects" sticky="false" floating="false" openOnHover="false" mobileLabel="Navbar" flushMobile="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Brand, links and actions usage">
|
||||
@@ -703,7 +703,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{demo_obj_1}' items='[{"label":"Overview","href":"/","value":"overview"},{"label":"Products","value":"products","columns":2,"description":"Everything in the platform.","children":[{"label":"Platform","children":[{"label":"Runtime","href":"/runtime","description":"The browser half.","icon":"icon-[lucide--cpu]"},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript.","icon":"icon-[lucide--hammer]"}]},{"label":"Tooling","children":[{"label":"CLI","href":"/cli","description":"Scaffold and deploy."},{"label":"Editor","href":"/editor","description":"Language server."}]}]},{"label":"Pricing","href":"/pricing","value":"pricing"}]' actions='[{"label":"Book a demo","href":"/demo","variant":"primary"}]' active="overview" sticky="false" floating="false" openOnHover="false" mobileLabel="Compact example" flushMobile="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Dropdown and mega panel usage">
|
||||
@@ -808,7 +808,7 @@ page NavbarDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="navbar-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Navbar size="sm" label="Advanced example" topbarLabel="Advanced example" brand='{demo_obj_2}' items='[{"label":"Docs","href":"/docs","value":"docs"},{"label":"Support","href":"/support","value":"support"}]' actions='[{"label":"Dashboard","href":"/app","variant":"primary"}]' active="docs" sticky="true" floating="false" openOnHover="false" mobileLabel="Toggle navigation" flushMobile="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Sticky and compact usage">
|
||||
|
||||
@@ -61,7 +61,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Pagination color="primary" size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact arrows usage">
|
||||
@@ -81,7 +81,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Pagination color="primary" size="default" page="5" pageSize="10" total="200" variant="numbered" siblingCount="1" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Numbered pages usage">
|
||||
@@ -102,7 +102,7 @@ page PaginationDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Pagination color="primary" size="default" page="8" pageSize="25" total="900" variant="numbered" siblingCount="2" showSummary="true" label="Pagination" previousLabel="Previous" nextLabel="Next" hrefTemplate="" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wider window usage">
|
||||
|
||||
@@ -77,7 +77,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default four-digit PIN usage">
|
||||
@@ -97,7 +97,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><div class="pin-length-demo"><PinInput size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Different lengths usage">
|
||||
@@ -130,7 +130,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Pre-filled verification code usage">
|
||||
@@ -152,7 +152,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Masked security PIN usage">
|
||||
@@ -173,7 +173,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Alphanumeric regex usage">
|
||||
@@ -196,7 +196,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped code with separator usage">
|
||||
@@ -219,7 +219,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Paste from clipboard usage">
|
||||
@@ -240,7 +240,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled PIN input usage">
|
||||
@@ -262,7 +262,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Read-only code usage">
|
||||
@@ -285,7 +285,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><PinInput size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation state usage">
|
||||
@@ -307,7 +307,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Supporting help text usage">
|
||||
@@ -329,7 +329,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large PIN cells usage">
|
||||
@@ -351,7 +351,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom placeholder usage">
|
||||
@@ -373,7 +373,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Automatic form submission usage">
|
||||
@@ -395,7 +395,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Completion events usage">
|
||||
@@ -416,7 +416,7 @@ page PinInputDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="pin-input-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><PinInput size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="JavaScript methods usage">
|
||||
|
||||
@@ -69,7 +69,7 @@ page PreferenceSwitcherDetail {
|
||||
<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"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -91,7 +91,7 @@ page PreferenceSwitcherDetail {
|
||||
<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"><PreferenceSwitcher size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -113,7 +113,7 @@ page PreferenceSwitcherDetail {
|
||||
<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"><PreferenceSwitcher size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" iconOnly="true" showCurrentLanguage="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -154,7 +154,7 @@ if (component) registerOutputHandler(component, "language", (payload) => <spa
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/flow-canvas"><small>Previous</small><strong>← Flow Canvas</strong></a>
|
||||
<a href="/components/toaster"><small>Next</small><strong>Toaster →</strong></a>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ page ProgressDetail {
|
||||
/></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>
|
||||
@@ -57,7 +57,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Progress size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -76,7 +76,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Progress size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -97,7 +97,7 @@ page ProgressDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="progress-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Progress size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -110,7 +110,7 @@ page ProgressDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -296,7 +296,7 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="default" label="Radio" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" options='[{"id":"radio-0-1","key":"radio-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"radio-0-2","key":"radio-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -429,7 +429,7 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" options='[{"id":"radio-1-1","key":"radio-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"radio-1-2","key":"radio-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -566,7 +566,7 @@ page RadioDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="radio-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Radio size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" options='[{"id":"radio-2-1","key":"radio-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"radio-2-2","key":"radio-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -84,7 +84,7 @@ page RangeSliderDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="range-slider-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><RangeSlider size="default" color="primary" id="" name="volume" label="Scale" hiddenLabel="false" placeholder="" variant="normal" icon="" iconPosition="start" value="2.4" min="0" max="5" step="0.2" showValue="true" showBounds="true" showSteps="false" marks='[]' helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fractional steps usage">
|
||||
|
||||
@@ -69,7 +69,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Rating size="default" color="primary" title="Rate your experience" description="" items='[]' variant="default" value="3" max="5" step="1" readonly="false" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Whole stars usage">
|
||||
@@ -95,7 +95,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Rating size="default" color="primary" title="Half-star rating" description="" items='[]' variant="default" value="3.5" max="5" step="0.5" readonly="false" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Half stars usage">
|
||||
@@ -122,7 +122,7 @@ page RatingDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="rating-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Rating size="default" color="primary" title="Detailed score" description="" items='[]' variant="default" value="4.2" max="5" step="0.2" readonly="true" disabled="false" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fine increments usage">
|
||||
|
||||
@@ -281,7 +281,7 @@ page ScrollspyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is connected up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" sticky="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Follows the reader usage">
|
||||
@@ -325,7 +325,7 @@ page ScrollspyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Scrollspy size="sm" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"}]' active="#installation" label="Compact example" heading="Sections" sticky="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact rail usage">
|
||||
|
||||
@@ -64,7 +64,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><SearchBox size="default" label="Search documentation" name="site-search" value="sample-1" placeholder="Search components and guides" type="search" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Site search usage">
|
||||
@@ -86,7 +86,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><SearchBox size="sm" label="Search stations" name="station-search" value="sample-2" placeholder="Name, district, or jurisdiction" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact directory search usage">
|
||||
@@ -109,7 +109,7 @@ page SearchBoxDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="search-box-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><SearchBox size="lg" color="info" label="Complaint reference" name="complaint-reference" value="sample-3" placeholder="Enter reference number" disabled="false" required="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Required service lookup usage">
|
||||
|
||||
@@ -41,7 +41,7 @@ page SectionDetail {
|
||||
</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>
|
||||
@@ -60,7 +60,7 @@ page SectionDetail {
|
||||
<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"><Section id="standard-section" size="default" variant="grid" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Standard content section usage">
|
||||
@@ -81,7 +81,7 @@ page SectionDetail {
|
||||
<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"><Section id="compact-section" size="sm" variant="soft" spacing="sm" maxWidth="wide" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact dashboard content</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact dashboard section usage">
|
||||
@@ -105,7 +105,7 @@ page SectionDetail {
|
||||
<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"><Section id="full-section" size="lg" variant="solid" maxWidth="full" fullWidth="true" borderTop="true" borderBottom="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width public page section</div></Section></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Full-width surface section usage">
|
||||
@@ -123,7 +123,7 @@ page SectionDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>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">
|
||||
|
||||
@@ -509,7 +509,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-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"><Select size="default" label="Select" hiddenLabel="false" value="sample-1" values='[{"id":"select-0-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' options='[{"id":"select-0-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' placeholder="Enter a sample value" variant="normal" icon="" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -751,7 +751,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-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"><Select size="sm" label="Compact example" hiddenLabel="false" value="sample-2" values='[{"id":"select-1-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-1-2","key":"select-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' options='[{"id":"select-1-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-1-2","key":"select-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -997,7 +997,7 @@ page SelectDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="select-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"><Select size="lg" label="Advanced example" hiddenLabel="false" value="sample-3" values='[{"id":"select-2-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-2-2","key":"select-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":"#select-demo","actionHref":"#select-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"]}]' options='[{"id":"select-2-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-2-2","key":"select-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":"#select-demo","actionHref":"#select-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"]}]' placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" inline="false" multiple="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -284,7 +284,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"><Sidebar size="default" label="Workspace" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"heading":"Projects","items":[{"label":"Active","href":"/active","value":"active","badge":"4"},{"label":"Archive","value":"archive","items":[{"label":"2025","href":"/a/2025","value":"a2025"},{"label":"2024","href":"/a/2024","value":"a2024"}]}]},{"heading":"Account","items":[{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]}]' active="active" mobileLabel="Sidebar" drawerTitle="Sidebar example" mobile="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Groups and nested levels usage">
|
||||
@@ -360,7 +360,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"><Sidebar size="sm" label="Operations" items='[{"label":"Queue","href":"/queue","value":"queue","icon":"icon-[lucide--inbox]"},{"label":"Reports","href":"/reports","value":"reports","icon":"icon-[lucide--chart-no-axes-column]"}]' active="queue" mobileLabel="Open navigation" drawerTitle="Operations" mobile="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Drawer on small screens usage">
|
||||
|
||||
@@ -36,7 +36,7 @@ page SkeletonDetail {
|
||||
/></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>5 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-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"><Skeleton label="Skeleton" size="md" lines="3" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -74,7 +74,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-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"><Skeleton label="Compact example" size="sm" lines="3" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -94,7 +94,7 @@ page SkeletonDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="skeleton-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"><Skeleton label="Advanced example" size="lg" lines="3" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -106,7 +106,7 @@ page SkeletonDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>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>"Loading"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>lines</code></td><td>number</td><td><code>3</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">
|
||||
|
||||
@@ -36,7 +36,7 @@ page SpinnerDetail {
|
||||
/></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>5 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -55,7 +55,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-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"><Spinner label="Spinner" size="md" lines="3" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -74,7 +74,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-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"><Spinner label="Compact example" size="sm" lines="3" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -94,7 +94,7 @@ page SpinnerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="spinner-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"><Spinner label="Advanced example" size="lg" lines="3" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -106,7 +106,7 @@ page SpinnerDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>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>"Loading"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>lines</code></td><td>number</td><td><code>3</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">
|
||||
|
||||
@@ -298,7 +298,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-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"><Stepper size="default" steps='[{"label":"Account","description":"Your details"},{"label":"Billing","description":"Payment method"},{"label":"Confirm","description":"Review and submit"}]' active="1" controlled="false" clickable="false" label="Stepper" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal progress usage">
|
||||
@@ -343,7 +343,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-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"><Stepper size="sm" steps='[{"label":"Cloned","icon":"icon-[lucide--git-branch]"},{"label":"Built","icon":"icon-[lucide--hammer]"},{"label":"Deployed","icon":"icon-[lucide--rocket]"}]' active="2" controlled="false" orientation="vertical" clickable="false" label="Compact example" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical with icons usage">
|
||||
@@ -390,7 +390,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-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"><Stepper size="lg" steps='[{"label":"Account","title":"Your details","content":"Name, email and a password."},{"label":"Billing","title":"How you pay","content":"Card or invoice."},{"label":"Confirm","title":"Review","content":"Check everything before submitting."}]' active="1" controlled="false" clickable="false" label="Advanced example" showPanel="true" controls="true" allowSkip="true" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wizard with content and controls usage">
|
||||
@@ -442,7 +442,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="lg" steps='[{"label":"Account","title":"Your details","content":"This step is not complete yet."},{"label":"Billing","title":"How you pay","content":"Card or invoice."}]' active="0" controlled="false" clickable="false" label="Advanced example" showPanel="true" controls="true" allowSkip="false" nextDisabled="true" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Held until the step is valid usage">
|
||||
@@ -488,7 +488,7 @@ page StepperDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="stepper-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Stepper size="lg" steps='[{"label":"One"},{"label":"Two"},{"label":"Three"}]' active="0" controlled="false" clickable="true" label="Advanced example" showPanel="false" controls="false" allowSkip="false" nextDisabled="false" backLabel="Back" nextLabel="Next" skipLabel="Skip" finishLabel="Finish" class="showcase-instance showcase-instance--5" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Clickable steps usage">
|
||||
|
||||
@@ -82,7 +82,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-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"><StrongPassword label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Live strength meter usage">
|
||||
@@ -104,7 +104,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-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"><StrongPassword label="Requirements and hint text" name="strong-password-2" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="Use a unique password you do not use for another account." disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Requirements and hint text usage">
|
||||
@@ -125,7 +125,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-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"><StrongPassword label="Requirements in a popover" name="strong-password-3" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="popover" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Requirements in a popover usage">
|
||||
@@ -146,7 +146,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Custom special characters" name="strong-password-4" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="@#_-." requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom special characters usage">
|
||||
@@ -167,7 +167,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Optional requirements" name="strong-password-5" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="false" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Optional requirements usage">
|
||||
@@ -188,7 +188,7 @@ page StrongPasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="strong-password-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><StrongPassword label="Disabled password strength" name="strong-password-6" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&*()_+-=[]{}|;:,.<>?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="true" readonly="false" required="false" invalid="false" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled password strength usage">
|
||||
|
||||
@@ -46,7 +46,7 @@ page StyledIconDetail {
|
||||
<span>}</span></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>
|
||||
@@ -65,7 +65,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-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"><StyledIcon size="default" color="primary" title="Styled Icon" description="" items='[]' variant="default" icon="icon-[lucide--sparkles]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -90,7 +90,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-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"><StyledIcon size="sm" color="success" title="Styled Icon" description="" items='[]' variant="default" icon="icon-[lucide--check]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -118,7 +118,7 @@ page StyledIconDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="styled-icon-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"><StyledIcon size="default" color="primary" title="Styled Icon" description="" items='[]' variant="outline" icon="icon-[lucide--shield-check]" label="Verified" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
@@ -137,7 +137,7 @@ page StyledIconDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Styled Icon"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--sparkles]"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -12,7 +12,7 @@ page SwitchDetail {
|
||||
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
||||
state playground_checked = (ctx.url.searchParams.get("pg_checked") ?? "false") === "true"
|
||||
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? ""
|
||||
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? ""
|
||||
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||
@@ -56,7 +56,7 @@ page SwitchDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>20 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-switch-size"><span><strong>size</strong><small>string</small></span><select id="playground-switch-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-switch-color"><span><strong>color</strong><small>string</small></span><select id="playground-switch-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-switch-id"><span><strong>id</strong><small>string</small></span><input id="playground-switch-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-switch-name"><span><strong>name</strong><small>string</small></span><input id="playground-switch-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-switch-label"><span><strong>label</strong><small>string</small></span><input id="playground-switch-label" name="pg_label" type="text" value="Switch" /></label><label class="playground-toggle" for="playground-switch-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-switch-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-switch-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-switch-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-switch-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-switch-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-switch-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-switch-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-switch-value"><span><strong>value</strong><small>string</small></span><input id="playground-switch-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-toggle" for="playground-switch-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-switch-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-switch-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-switch-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-switch-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-switch-error"><span><strong>error</strong><small>string</small></span><input id="playground-switch-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-switch-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-switch-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-switch-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-switch-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-switchLine truncated
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-switch-size"><span><strong>size</strong><small>string</small></span><select id="playground-switch-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-switch-color"><span><strong>color</strong><small>string</small></span><select id="playground-switch-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-switch-id"><span><strong>id</strong><small>string</small></span><input id="playground-switch-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-switch-name"><span><strong>name</strong><small>string</small></span><input id="playground-switch-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-switch-label"><span><strong>label</strong><small>string</small></span><input id="playground-switch-label" name="pg_label" type="text" value="Switch" /></label><label class="playground-toggle" for="playground-switch-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-switch-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-switch-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-switch-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-switch-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-switch-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-switch-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-switch-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-switch-value"><span><strong>value</strong><small>string</small></span><input id="playground-switch-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-switch-checked"><span><strong>checked</strong><small>boolean | null</small></span><input id="playground-switch-checked" name="pg_checked" type="text" value="" /></label><label class="playground-field" for="playground-switch-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-switch-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-switch-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-switch-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-switch-error"><span><strong>error</strong><small>string</small></span><input id="playground-switch-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-switch-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-switch-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-switch-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-switch-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-switch-required" name="pg_required" type="checkbox" value=Line truncated
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -71,8 +71,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-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"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -91,8 +91,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-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"><Switch size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -115,8 +115,8 @@ page SwitchDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="switch-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"><Switch size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
|
||||
<div class="demo-render"><Switch size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -155,7 +155,7 @@ if (component) registerOutputHandler(component, "focus", (payload) => <span>&
|
||||
if (component) registerOutputHandler(component, "blur", (payload) => <span>{</span>
|
||||
console.log("blur", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Switch"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"on"</code></td><td>No</td></tr><tr><td><code>checked</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Switch"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"on"</code></td><td>No</td></tr><tr><td><code>checked</code></td><td>boolean | null</td><td><code>null</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#switch-demo-1">Production default</a><a href="#switch-demo-2">Compact application</a><a href="#switch-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
|
||||
@@ -278,7 +278,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-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"><Tabs size="default" items='[{"label":"Overview","value":"overview","content":"Overview content"},{"label":"Requirements","value":"requirements","content":"Requirements content"},{"label":"Process","value":"process","content":"Process content"}]' active="overview" orientation="horizontal" label="Service information" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal content tabs usage">
|
||||
@@ -320,7 +320,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-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"><Tabs size="sm" items='[{"label":"Account","value":"account","description":"Profile and credentials."},{"label":"Billing","value":"billing","description":"Invoices and payment method."},{"label":"Team","value":"team","description":"Members and their roles."}]' active="account" mode="url" param="tab" label="Account settings" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Mirrored into the URL usage">
|
||||
@@ -364,7 +364,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-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"><Tabs size="sm" items='[{"label":"Details","value":"details"},{"label":"History","value":"history"},{"label":"Files","value":"files"}]' active="details" label="Record views" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application tabs usage">
|
||||
@@ -404,7 +404,7 @@ page TabsDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tabs-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><Tabs size="lg" items='[{"label":"Profile","value":"profile","icon":"icon-[lucide--user]"},{"label":"Security","value":"security","icon":"icon-[lucide--shield]"},{"label":"Notifications","value":"notifications","icon":"icon-[lucide--bell]"}]' active="security" orientation="vertical" label="Settings" class="showcase-instance showcase-instance--4" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical settings tabs usage">
|
||||
|
||||
@@ -65,7 +65,7 @@ page TextLinkDetail {
|
||||
<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"><TextLink label="Learn more" href="#learn" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline directional link usage">
|
||||
@@ -84,7 +84,7 @@ page TextLinkDetail {
|
||||
<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"><TextLink label="Read the complete guide" href="#guide" external="false" icon="icon-[lucide--arrow-right]" showArrow="false" underline="true" size="sm" variant="secondary" disabled="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Underlined content link usage">
|
||||
@@ -109,7 +109,7 @@ page TextLinkDetail {
|
||||
<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"><TextLink label="Open WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" icon="icon-[lucide--book-open]" iconPosition="start" showArrow="false" underline="false" size="lg" variant="soft" disabled="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="External developer link usage">
|
||||
|
||||
@@ -74,7 +74,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-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"><Textarea size="default" label="Textarea" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -94,7 +94,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-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"><Textarea size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -118,7 +118,7 @@ page TextareaDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="textarea-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"><Textarea size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" variant="success" icon="icon-[lucide--trash-2]" inline="false" rows="5" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -156,7 +156,7 @@ page TimePickerDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="time-picker-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TimePicker size="default" name="meeting-time" label="Meeting time" hiddenLabel="false" value="09:30" placeholder="Enter a sample value" variant="normal" icon="" inline="false" minuteStep="5" hours='["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"]' minutes='["00","05","10","15","20","25","30","35","40","45","50","55"]' readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Time picker usage">
|
||||
|
||||
@@ -279,7 +279,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-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"><Timeline size="default" title="Request progress" description="Latest updates for this service request." items='[{"title":"Request submitted","description":"Received successfully","time":"09:30","status":"complete"},{"title":"Verification","description":"Documents are being reviewed","time":"10:15","current":true},{"title":"Decision","description":"Pending verification","time":"—"}]' variant="default" numbered="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Application timeline usage">
|
||||
@@ -323,7 +323,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-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"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' variant="compact" numbered="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact activity history usage">
|
||||
@@ -364,7 +364,7 @@ page TimelineDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="timeline-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"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' variant="alternate" numbered="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich milestone timeline usage">
|
||||
|
||||
@@ -65,7 +65,7 @@ page ToasterDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toaster-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 class="showcase-toast-demo"><button type="button" @click='toast.success("Your changes are live", { title: "Published" })'>success</button><button type="button" @click='toast.error("We could not reach the server", { title: "Network error" })'>danger</button><button type="button" @click='toast.warning("Your trial ends in 3 days", { title: "Heads up", icon: "icon-[lucide--hourglass]" })'>warning + custom icon</button><button type="button" @click='toast.info("Export queued")'>info</button><button type="button" @click='toast("Note deleted", { title: "Deleted", actionLabel: "Undo" })'>one action</button><button type="button" @click='toast.warning("This file changed elsewhere", { title: "Conflict", duration: 0, actions: [{ label: "Keep mine" }, { label: "Discard", tone: "danger" }] })'>two actions (sticky)</button><button type="button" @click='toast("No icon on this one", { icon: false })'>icon suppressed</button><button type="button" @click='toast.success("Gone in 1.5s", { duration: 1500 })'>short duration</button><button type="button" @click='toast.clear()'>clear all</button></div><Toaster size="default" position="bottom-right" duration="4500" max="4" pauseOnHover="true" showIcon="true" closable="true" showProgress="true" closeLabel="Toaster" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Raise notifications from anywhere usage">
|
||||
|
||||
@@ -112,7 +112,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-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"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 1 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -155,7 +155,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-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"><ToggleCount size="sm" variant="secondary" class="showcase-instance showcase-instance--2" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 2 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="center" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -200,7 +200,7 @@ page ToggleCountDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-count-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"><ToggleCount size="lg" variant="success" class="showcase-instance showcase-instance--3" value="monthly" firstValue="monthly" firstLabel="Monthly" secondValue="annual" secondLabel="Yearly" ariaLabel="Toggle Count 3 example" items='[{"title":"Starter","label":"Starter","description":"For individuals getting started.","monthly":12,"annual":120},{"title":"Team","label":"Team","description":"For teams working together.","monthly":29,"annual":290}]' firstValueKey="monthly" secondValueKey="annual" align="end" fullWidth="true" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -85,7 +85,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-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"><TogglePassword size="default" label="Password" name="toggle-password-1" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Inline visibility button usage">
|
||||
@@ -112,7 +112,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-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"><TogglePassword size="default" label="Checkbox-controlled toggle" name="toggle-password-2" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="checkbox" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Checkbox-controlled toggle usage">
|
||||
@@ -141,7 +141,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-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"><TogglePassword size="default" label="Passwords" name="toggle-password-3" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[{"label":"New password","name":"new-password","placeholder":"Enter new password","autocomplete":"new-password"},{"label":"Current password","name":"current-password","value":"Northstar!2026","autocomplete":"current-password"}]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Synchronized password fields usage">
|
||||
@@ -181,7 +181,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Without visibility toggle" name="toggle-password-4" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="false" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Without visibility toggle usage">
|
||||
@@ -209,7 +209,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Supporting help text" name="toggle-password-5" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="Use at least eight characters and avoid passwords used on other sites." validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Supporting help text usage">
|
||||
@@ -237,7 +237,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><form data-schema="toggle-password-validation" class="demo-validation-form"><TogglePassword size="default" label="Required validation" name="toggle-password-6" value="" placeholder="Enter your password" autocomplete="current-password" minlength="8" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="true" invalid="false" helpText="" validationMessage="" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Required validation usage">
|
||||
@@ -266,7 +266,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Disabled password" name="toggle-password-7" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="true" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled password usage">
|
||||
@@ -294,7 +294,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Read-only password" name="toggle-password-8" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="true" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Read-only password usage">
|
||||
@@ -323,7 +323,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="lg" label="Large password field" name="toggle-password-9" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Large password field usage">
|
||||
@@ -351,7 +351,7 @@ page TogglePasswordDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="toggle-password-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
|
||||
<div class="demo-render"><TogglePassword size="default" label="Toggle events" name="toggle-password-10" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Toggle events usage">
|
||||
|
||||
@@ -122,7 +122,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-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"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -176,7 +176,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-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"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -230,7 +230,7 @@ page TreeViewDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="tree-view-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"><TreeView title="Project files" description="" items='[{"value":"src","label":"src","children":[{"value":"pages","label":"pages","children":[{"value":"home","label":"index.wrn"}]},{"value":"styles","label":"styles.css"}]},{"value":"readme","label":"README.md"}]' valueKey="value" labelKey="label" defaultExpanded='["src"]' selected="" size="default" color="primary" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -37,7 +37,7 @@ page TypographyDetail {
|
||||
</Typography></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>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
@@ -56,7 +56,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-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"><Typography size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Readable content typography usage">
|
||||
@@ -75,7 +75,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-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"><Typography size="compact" columns="2" maxWidth="compact" class="showcase-instance showcase-instance--2"><div class="showcase-typography"><h3>Compact reference</h3><p>Focused content with reduced spacing.</p></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact documentation typography usage">
|
||||
@@ -96,7 +96,7 @@ page TypographyDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="typography-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"><Typography size="spacious" columns="2" gap="xl" maxWidth="wide" class="showcase-instance showcase-instance--3"><div class="showcase-typography"><h2>Long-form public information</h2><p>Structured editorial content can use a wider two-column layout on large screens.</p><p>Responsive behavior returns content to one column on smaller screens.</p></div></Typography></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wide editorial typography usage">
|
||||
@@ -110,7 +110,7 @@ page TypographyDetail {
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
|
||||
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
|
||||
@@ -67,7 +67,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-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"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="false" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
@@ -93,7 +93,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-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"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="false" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
@@ -119,7 +119,7 @@ page WysiwygEditorDetail {
|
||||
<div class="demo-workbench">
|
||||
<div id="wysiwyg-editor-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"><WysiwygEditor size="default" color="primary" title="Project update" description="" items='[]' variant="default" value="Share progress, decisions, and next steps with your team." readonly="true" placeholder="Write something…" class="" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
|
||||
@@ -3,16 +3,36 @@ page CoreShowcase {
|
||||
layout = "showcase"
|
||||
seo {
|
||||
title = "Core components"
|
||||
description = "2 core components from @wrnexus/ui."
|
||||
description = "4 core components from @wrnexus/ui."
|
||||
}
|
||||
view {
|
||||
<header class="showcase-hero showcase-hero--category">
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Core</h1>
|
||||
<p class="showcase-description">2 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>2 components</span><span>Multiple use cases</span><span>4 live configurations</span></div>
|
||||
<p class="showcase-description">4 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>4 components</span><span>Multiple use cases</span><span>10 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><DrawflowCanvas toolbar="true" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Core</span><h2>Drawflow Canvas</h2><p>Reusable drawflow canvas component.</p></div>
|
||||
<div class="catalog-card-footer"><span>3 props · 0 slots</span><a href="/components/drawflow-canvas">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><FlowCanvas nodes='[{"id":"flow-canvas-0-1","key":"flow-canvas-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":"#flow-canvas-demo","actionHref":"#flow-canvas-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":"flow-canvas-0-2","key":"flow-canvas-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#flow-canvas-demo","actionHref":"#flow-canvas-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"]}]' palette='[{"id":"flow-canvas-0-1","key":"flow-canvas-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":"#flow-canvas-demo","actionHref":"#flow-canvas-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":"flow-canvas-0-2","key":"flow-canvas-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#flow-canvas-demo","actionHref":"#flow-canvas-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"]}]' label="Flow Canvas" arrangeLabel="Flow Canvas" connectLabel="Flow Canvas" size="default" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Core</span><h2>Flow Canvas</h2><p>Reusable flow canvas component.</p></div>
|
||||
<div class="catalog-card-footer"><span>9 props · 0 slots</span><a href="/components/flow-canvas">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
|
||||
@@ -10,7 +10,7 @@ page DarkModeGuide {
|
||||
<header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Dark mode</h1><p>Choose light, dark, or system mode. The selection persists and updates every preview.</p></header>
|
||||
<section class="guide-section"><h2>Overview</h2><p>Choose light, dark, or system mode. The selection persists and updates every preview.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
|
||||
<section class="guide-section"><h2>Use semantic colors in both modes</h2><p>Use shared surface, text, border and focus tokens instead of hard-coded white and black. Check disabled, hover, selected and error states in both themes using the appearance control.</p><pre><code>.panel <span>{</span> background: var(--wrn-color-surface); color: var(--wrn-color-text); border: 1px solid var(--wrn-color-border); <span>}</span></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ page FontsGuide {
|
||||
<section class="guide-section"><h2>Overview</h2><p>Select a font family globally while components continue to inherit typography correctly.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
|
||||
<section class="guide-section"><h2>Set one application font</h2><p>Components inherit the shared font family. Supply a font stack once; use font weights and spacing to establish hierarchy instead of enlarging every label.</p><pre><code>:root <span>{</span> --wrn-font-sans: "Inter", system-ui, sans-serif; <span>}</span>
|
||||
body <span>{</span> font-family: var(--wrn-font-sans); <span>}</span></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -106,7 +106,7 @@ page FormsShowcase {
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" checked="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="catalog-card-stage"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p></div>
|
||||
|
||||
@@ -13,7 +13,7 @@ page FrameworkGuidesGuide {
|
||||
state name: string = ""
|
||||
view <span>{</span> <Input label="Your name" value="<span>{</span>name<span>}</span>" @input="name = payload.value" /><p>Hello <span>{</span>name<span>}</span></p> <span>}</span>
|
||||
<span>}</span></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -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 84 primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.</p>
|
||||
<p class="showcase-description">A complete, accessible component system with 86 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="/block-library">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>84 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="/block-library">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>86 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="/block-library">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>84</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>346</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>86</strong><span>Unique components</span></div>
|
||||
<div class="showcase-stat"><strong>361</strong><span>Live configurations</span></div>
|
||||
<div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
|
||||
<div class="showcase-stat"><strong>11</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="/base"><span class="home-category-index">01</span><div><strong>Base</strong><p>26 components · 85 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="/core"><span class="home-category-index">02</span><div><strong>Core</strong><p>2 components · 4 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="/data"><span class="home-category-index">03</span><div><strong>Data</strong><p>1 components · 3 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 · 32 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>7 components · 19 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>11 components · 31 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="/marketing"><span class="home-category-index">07</span><div><strong>Marketing</strong><p>1 components · 3 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="/navigation"><span class="home-category-index">08</span><div><strong>Navigation</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--1" href="/overlays"><span class="home-category-index">09</span><div><strong>Overlays</strong><p>6 components · 21 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="/tables"><span class="home-category-index">010</span><div><strong>Tables</strong><p>1 components · 9 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="/advanced-forms"><span class="home-category-index">011</span><div><strong>Advanced Forms</strong><p>7 components · 109 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="/base"><span class="home-category-index">01</span><div><strong>Base</strong><p>26 components · 85 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="/core"><span class="home-category-index">02</span><div><strong>Core</strong><p>4 components · 10 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="/data"><span class="home-category-index">03</span><div><strong>Data</strong><p>1 components · 3 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 · 32 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>7 components · 28 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>11 components · 31 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="/marketing"><span class="home-category-index">07</span><div><strong>Marketing</strong><p>1 components · 3 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="/navigation"><span class="home-category-index">08</span><div><strong>Navigation</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--1" href="/overlays"><span class="home-category-index">09</span><div><strong>Overlays</strong><p>6 components · 21 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="/tables"><span class="home-category-index">010</span><div><strong>Tables</strong><p>1 components · 9 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="/advanced-forms"><span class="home-category-index">011</span><div><strong>Advanced Forms</strong><p>7 components · 109 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -10,17 +10,17 @@ page IntegrationsShowcase {
|
||||
<span class="showcase-eyebrow">Component category</span>
|
||||
<h1 class="showcase-title">Integrations</h1>
|
||||
<p class="showcase-description">7 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||
<div class="category-meta"><span>7 components</span><span>Multiple use cases</span><span>19 live configurations</span></div>
|
||||
<div class="category-meta"><span>7 components</span><span>Multiple use cases</span><span>28 live configurations</span></div>
|
||||
</header>
|
||||
<div class="catalog-grid">
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><Chart title="Weekly signups" description="Completed tasks this week" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="false" showValues="true" size="default" color="primary" variant="bar" class="" /></div>
|
||||
<div class="catalog-card-stage"><Chart title="Sample weekly changes" description="Sample data" items='[]' data='[{"label":"Mon","value":24},{"label":"Tue","value":-12},{"label":"Wed","value":29},{"label":"Thu","value":52},{"label":"Fri","value":45}]' labels='[]' datasets='[]' type="bar" valueKey="value" labelKey="label" height="220" showLegend="true" showValues="false" size="default" color="primary" variant="bar" class="" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Integrations</span><h2>Chart</h2><p>Theme-aware, responsive chart component.</p></div>
|
||||
<div class="catalog-card-footer"><span>14 props · 1 slots</span><a href="/components/chart">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
<div class="catalog-card-footer"><span>17 props · 1 slots</span><a href="/components/chart">Explore component <span aria-hidden="true">→</span></a></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
|
||||
@@ -13,7 +13,7 @@ page ResourcesGuide {
|
||||
state rows = [<span>{</span> id: 1, name: "Northwind" <span>}</span>]
|
||||
state columns = [<span>{</span> key: "name", label: "Account" <span>}</span>]
|
||||
<DataTable rows="<span>{</span>rows<span>}</span>" columns="<span>{</span>columns<span>}</span>" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ page SizingGuide {
|
||||
<section class="guide-section"><h2>Match density to the task</h2><p>Use compact controls for dense toolbars and tables, and the default size for forms. Keep related controls at the same size and retain usable touch targets on small screens.</p><pre><code><Button label="Filter" size="sm" />
|
||||
<Input label="Project name" size="default" />
|
||||
<RangeSlider label="Scale" min="0" max="5" step="0.2" value="2.4" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ page ThemesGuide {
|
||||
<section class="guide-section"><h2>Default</h2><p>Balanced surfaces, borders, elevation, and radius.</p></section><section class="guide-section"><h2>Soft and sharp</h2><p>Choose friendly rounded surfaces or dense operational styling.</p></section><section class="guide-section"><h2>Glass</h2><p>Use translucent layered surfaces while retaining semantic tokens.</p></section>
|
||||
<section class="guide-section"><h2>Keep theme overrides in one place</h2><p>Override design tokens at your application root so all components inherit the same appearance. Start with radius and brand color, then review overlays, forms and navigation together.</p><pre><code>:root <span>{</span> --wrn-radius: 8px; --wrn-color-primary: #7c3aed; <span>}</span>
|
||||
<Button label="Primary action" color="primary" /></code></pre><h3>Verify the result</h3><p>Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.</p></section>
|
||||
|
||||
|
||||
<nav class="guide-next"><a href="/components/button">Explore components <span aria-hidden="true">→</span></a><a href="/block-library">Browse blocks <span aria-hidden="true">→</span></a></nav>
|
||||
</article>
|
||||
}
|
||||
|
||||
@@ -2415,7 +2415,7 @@ body {
|
||||
|
||||
.detail-hero {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: .75rem;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 0;
|
||||
border-radius: var(--wrn-radius-md);
|
||||
}
|
||||
@@ -2428,7 +2428,10 @@ body {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.detail-hero-icon > span { width: 1.5rem; height: 1.5rem; }
|
||||
.detail-hero-icon > span {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-hero h1 {
|
||||
font-size: clamp(1.5rem, 6vw, 2rem);
|
||||
@@ -3016,34 +3019,162 @@ body {
|
||||
min-height: 18rem;
|
||||
}
|
||||
|
||||
[data-docs-empty][hidden] { display:none !important; }
|
||||
.demo-render:has(.wrn-back-to-top), .playground-preview-source:has(.wrn-back-to-top) { position:relative; transform:translateZ(0); }
|
||||
.demo-render:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table), .playground-preview-source:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table) { padding:1rem; }
|
||||
.demo-case:has(.wrn-chart,.wrn-map,.wrn-editor,.wrn-table) .demo-workbench { grid-template-columns:minmax(0,1fr); }
|
||||
[data-docs-empty][hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
.demo-render:has(.wrn-back-to-top),
|
||||
.playground-preview-source:has(.wrn-back-to-top) {
|
||||
position: relative;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.demo-render:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table),
|
||||
.playground-preview-source:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table) {
|
||||
padding: 1rem;
|
||||
}
|
||||
.demo-case:has(.wrn-chart, .wrn-map, .wrn-editor, .wrn-table) .demo-workbench {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.example-catalog { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.25rem; }
|
||||
.example-card { display:block; overflow:hidden; border:1px solid var(--wrn-color-border); border-radius:12px; color:var(--wrn-color-text); background:var(--wrn-color-surface); text-decoration:none; }
|
||||
.example-card__art { display:grid; place-items:center; height:9rem; background:var(--wrn-color-surface-2); border-bottom:1px solid var(--wrn-color-border); }
|
||||
.example-card__art span { width:2.5rem; height:2.5rem; color:var(--wrn-color-primary-text); }
|
||||
.example-card > div:last-child { padding:1.25rem; }
|
||||
.example-card h2 { font-size:1.1rem; margin:0 0 .5rem; }
|
||||
.example-card p { font-size:.875rem; color:var(--wrn-color-muted); min-height:2.8rem; }
|
||||
.example-card strong { font-size:.8rem; color:var(--wrn-color-primary-text); }
|
||||
.example-toolbar { display:flex; justify-content:space-between; padding:1rem 2rem; border-bottom:1px solid var(--wrn-color-border); background:var(--wrn-color-surface); }
|
||||
.example-code-panel { margin:2rem auto; width:min(100% - 2rem,80rem); border:1px solid var(--wrn-color-border); border-radius:10px; overflow:hidden; background:var(--wrn-color-surface); }
|
||||
.example-code-panel header { display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid var(--wrn-color-border); }
|
||||
.example-code-panel h2 { font-size:1rem; margin:0; }
|
||||
.example-code-panel button { padding:.45rem .8rem; border:1px solid var(--wrn-color-border); border-radius:6px; background:var(--wrn-color-surface-2); color:var(--wrn-color-text); cursor:pointer; }
|
||||
.example-code-panel pre { margin:0; padding:1.25rem; max-height:32rem; overflow:auto; font-size:.8rem; white-space:pre; }
|
||||
.example-code-panel summary { padding:1rem; cursor:pointer; }
|
||||
.block-live-preview { padding:clamp(1rem,3vw,2rem); border:1px solid var(--wrn-color-border); border-radius:10px; background:var(--wrn-color-bg); overflow:auto; }
|
||||
.example-form-page { max-width:42rem; margin:3rem auto; padding:1.5rem; display:grid; gap:1.5rem; }
|
||||
.example-form-page h1 { margin:0; font-size:1.75rem; }
|
||||
.example-catalog {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.example-card {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 12px;
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-surface);
|
||||
text-decoration: none;
|
||||
}
|
||||
.example-card__art {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 9rem;
|
||||
background: var(--wrn-color-surface-2);
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
.example-card__art span {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
color: var(--wrn-color-primary-text);
|
||||
}
|
||||
.example-card > div:last-child {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
.example-card h2 {
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.example-card p {
|
||||
font-size: 0.875rem;
|
||||
color: var(--wrn-color-muted);
|
||||
min-height: 2.8rem;
|
||||
}
|
||||
.example-card strong {
|
||||
font-size: 0.8rem;
|
||||
color: var(--wrn-color-primary-text);
|
||||
}
|
||||
.example-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
background: var(--wrn-color-surface);
|
||||
}
|
||||
.example-code-panel {
|
||||
margin: 2rem auto;
|
||||
width: min(100% - 2rem, 80rem);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: var(--wrn-color-surface);
|
||||
}
|
||||
.example-code-panel header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
.example-code-panel h2 {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
.example-code-panel button {
|
||||
padding: 0.45rem 0.8rem;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 6px;
|
||||
background: var(--wrn-color-surface-2);
|
||||
color: var(--wrn-color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
.example-code-panel pre {
|
||||
margin: 0;
|
||||
padding: 1.25rem;
|
||||
max-height: 32rem;
|
||||
overflow: auto;
|
||||
font-size: 0.8rem;
|
||||
white-space: pre;
|
||||
}
|
||||
.example-code-panel summary {
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.block-live-preview {
|
||||
padding: clamp(1rem, 3vw, 2rem);
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: 10px;
|
||||
background: var(--wrn-color-bg);
|
||||
overflow: auto;
|
||||
}
|
||||
.example-form-page {
|
||||
max-width: 42rem;
|
||||
margin: 3rem auto;
|
||||
padding: 1.5rem;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.example-form-page h1 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.gallery-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1rem,5vw,5rem); border-bottom:1px solid var(--wrn-color-border); }
|
||||
.gallery-header nav { display:flex; flex-wrap:wrap; gap:1.5rem; font-size:.875rem; }
|
||||
.gallery-main { max-width:1440px; margin:auto; padding:clamp(1rem,4vw,4rem); }
|
||||
.template-products { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1.25rem; }
|
||||
@media(max-width:600px) { .gallery-header { align-items:flex-start; flex-direction:column; } }
|
||||
.gallery-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem clamp(1rem, 5vw, 5rem);
|
||||
border-bottom: 1px solid var(--wrn-color-border);
|
||||
}
|
||||
.gallery-header nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.gallery-main {
|
||||
max-width: 1440px;
|
||||
margin: auto;
|
||||
padding: clamp(1rem, 4vw, 4rem);
|
||||
}
|
||||
.template-products {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.gallery-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.playground-preview-source:has(.wrn-confetti), .demo-render:has(.wrn-confetti) { justify-items:center; overflow:hidden; }
|
||||
.playground-preview-source:has(.wrn-confetti),
|
||||
.demo-render:has(.wrn-confetti) {
|
||||
justify-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -153,7 +153,9 @@
|
||||
declarations.push(` state ${name} = ${JSON.stringify(data, null, 2)}`);
|
||||
attributes.push(`${name}="{${name}}"`);
|
||||
continue;
|
||||
} catch { /* Keep invalid JSON visible for correction. */ }
|
||||
} catch {
|
||||
/* Keep invalid JSON visible for correction. */
|
||||
}
|
||||
}
|
||||
if (field instanceof HTMLInputElement && field.type === "checkbox") {
|
||||
attributes.push(`${name}="${field.checked}"`);
|
||||
@@ -172,7 +174,8 @@
|
||||
let source = hasSlot
|
||||
? `${opening}>\n <!-- Add slot content here -->\n</${tag}>`
|
||||
: `${opening}\n/>`;
|
||||
if (declarations.length) source = `page ${component.replace(/[^A-Za-z0-9]/g, "")}Example {\n${declarations.join("\n")}\n view {\n${source}\n }\n}`;
|
||||
if (declarations.length)
|
||||
source = `page ${component.replace(/[^A-Za-z0-9]/g, "")}Example {\n${declarations.join("\n")}\n view {\n${source}\n }\n}`;
|
||||
writeCode(code, source);
|
||||
}
|
||||
|
||||
@@ -335,7 +338,10 @@
|
||||
const initializedCode = new WeakSet();
|
||||
function bindPlaygroundEvents(root = document) {
|
||||
for (const playground of root.querySelectorAll?.(SELECTOR) ?? []) {
|
||||
if (!initializedCode.has(playground)) { initializedCode.add(playground); updateCode(playground); }
|
||||
if (!initializedCode.has(playground)) {
|
||||
initializedCode.add(playground);
|
||||
updateCode(playground);
|
||||
}
|
||||
const outputNames = (playground.getAttribute("data-playground-events") || "")
|
||||
.split(",")
|
||||
.map((name) => name.trim())
|
||||
@@ -413,7 +419,14 @@
|
||||
const copyTarget = event.target.closest?.("[data-copy-target]");
|
||||
if (copyTarget) {
|
||||
const target = document.querySelector(copyTarget.dataset.copyTarget);
|
||||
if (target) { try { await navigator.clipboard.writeText(target.textContent || ""); copyTarget.textContent = "Copied"; } catch { copyTarget.textContent = "Select code to copy"; } }
|
||||
if (target) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(target.textContent || "");
|
||||
copyTarget.textContent = "Copied";
|
||||
} catch {
|
||||
copyTarget.textContent = "Select code to copy";
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
const copyText = event.target.closest?.("[data-copy-text]");
|
||||
|
||||
@@ -1,67 +1,201 @@
|
||||
import { existsSync, unlinkSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
|
||||
import {
|
||||
existsSync,
|
||||
unlinkSync,
|
||||
mkdirSync,
|
||||
readFileSync,
|
||||
readdirSync,
|
||||
writeFileSync,
|
||||
} from "node:fs";
|
||||
import { join } from "node:path";
|
||||
|
||||
export async function generateCatalogPages({ exampleRoot, pagesDir, blockComponents, componentMount, sourceSnippet, demoConfiguration, slugOf, displayName, escapeCode, escapeText, resetHoistedObjects, hoistedObjectStates }) {
|
||||
const write = (path, text) => { mkdirSync(join(pagesDir, path.substring(0,path.lastIndexOf('/')) || '.'), {recursive:true}); writeFileSync(join(pagesDir,path), text); };
|
||||
const codePanel = (source, id="example-source") => `<section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#${id}">Copy code</button></header><pre><code id="${id}">${escapeCode(source)}</code></pre></section>`;
|
||||
const page = (name,title,body) => `page ${name} {\n layout = "gallery"\n seo { title = "${title}" }\n view { ${body} }\n}\n`;
|
||||
const cards = entries => `<div class="example-catalog">${entries.map(e=>`<a class="example-card" href="${e.href}"><div class="example-card__art"><span class="icon-[lucide--${e.icon}]" aria-hidden="true"></span></div><div><h2>${e.title}</h2><p>${e.description}</p><strong>Open example →</strong></div></a>`).join('')}</div>`;
|
||||
export async function generateCatalogPages({
|
||||
exampleRoot,
|
||||
pagesDir,
|
||||
blockComponents,
|
||||
componentMount,
|
||||
demoConfiguration,
|
||||
slugOf,
|
||||
displayName,
|
||||
escapeCode,
|
||||
resetHoistedObjects,
|
||||
hoistedObjectStates,
|
||||
}) {
|
||||
const write = (path, text) => {
|
||||
mkdirSync(join(pagesDir, path.substring(0, path.lastIndexOf("/")) || "."), { recursive: true });
|
||||
writeFileSync(join(pagesDir, path), text);
|
||||
};
|
||||
const codePanel = (source, id = "example-source") =>
|
||||
`<section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#${id}">Copy code</button></header><pre><code id="${id}">${escapeCode(source)}</code></pre></section>`;
|
||||
const page = (name, title, body) =>
|
||||
`page ${name} {\n layout = "gallery"\n seo { title = "${title}" }\n view { ${body} }\n}\n`;
|
||||
const cards = (entries) =>
|
||||
`<div class="example-catalog">${entries.map((e) => `<a class="example-card" href="${e.href}"><div class="example-card__art"><span class="icon-[lucide--${e.icon}]" aria-hidden="true"></span></div><div><h2>${e.title}</h2><p>${e.description}</p><strong>Open example →</strong></div></a>`).join("")}</div>`;
|
||||
const examples = [
|
||||
{slug:'workspace',title:'Workspace overview',icon:'layout-dashboard',description:'A complete dashboard with navigation, metrics, and service cards.'},
|
||||
{slug:'profile',title:'Profile & preferences',icon:'user-round',description:'A responsive settings form with grouped fields and save feedback.'},
|
||||
{slug:'sign-in',title:'Sign in',icon:'log-in',description:'A focused authentication page with a compact form.'},
|
||||
{slug:'scheduling',title:'Scheduling',icon:'calendar-days',description:'Date, date-and-time, and time controls in a practical form.'},
|
||||
{slug:'custom-modal',title:'Custom modal',icon:'panels-top-left',description:'Open and close a fully controlled dialog from your own buttons.'},
|
||||
{slug:'project-board',title:'Project workspace',icon:'list-checks',description:'Reorder priorities and write rich-text project updates.'},
|
||||
{
|
||||
slug: "workspace",
|
||||
title: "Workspace overview",
|
||||
icon: "layout-dashboard",
|
||||
description: "A complete dashboard with navigation, metrics, and service cards.",
|
||||
},
|
||||
{
|
||||
slug: "profile",
|
||||
title: "Profile & preferences",
|
||||
icon: "user-round",
|
||||
description: "A responsive settings form with grouped fields and save feedback.",
|
||||
},
|
||||
{
|
||||
slug: "sign-in",
|
||||
title: "Sign in",
|
||||
icon: "log-in",
|
||||
description: "A focused authentication page with a compact form.",
|
||||
},
|
||||
{
|
||||
slug: "scheduling",
|
||||
title: "Scheduling",
|
||||
icon: "calendar-days",
|
||||
description: "Date, date-and-time, and time controls in a practical form.",
|
||||
},
|
||||
{
|
||||
slug: "custom-modal",
|
||||
title: "Custom modal",
|
||||
icon: "panels-top-left",
|
||||
description: "Open and close a fully controlled dialog from your own buttons.",
|
||||
},
|
||||
{
|
||||
slug: "project-board",
|
||||
title: "Project workspace",
|
||||
icon: "list-checks",
|
||||
description: "Reorder priorities and write rich-text project updates.",
|
||||
},
|
||||
];
|
||||
const extra = {
|
||||
scheduling:`page SchedulingExample {\n view { <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Schedule a meeting</h1><p>Choose the date and time that work for your team.</p><DatePicker label="Meeting date" name="date" /><DatePicker type="datetime-local" label="Send reminder" name="reminder" value="2026-09-20T09:30" /><TimePicker label="Start time" name="time" value="09:30" /></main> }\n}`,
|
||||
'custom-modal':`page CustomModalExample {\n state dialogOpen: boolean = false\n view { <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Your own modal controls</h1><Button label="Invite a teammate" @click="dialogOpen = true" /><Modal open="{dialogOpen}" @close="dialogOpen = false" title="" description="" showFooter="true" cancelLabel="" confirmLabel=""><div data-slot="header"><h2>Invite a teammate</h2></div><Input label="Email address" type="email" name="invite-email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Cancel" variant="secondary" @click="dialogOpen = false" /><Button label="Done" @click="dialogOpen = false" /></div></Modal></main> }\n}`,
|
||||
'project-board':`page ProjectBoardExample {\n state tasks = [{label:"Review designs"},{label:"Build the dashboard"},{label:"Test accessibility"}]\n view { <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Project workspace</h1><DragAndDrop title="Priorities" description="Drag a row or use its arrow buttons." items="{tasks}" /><WysiwygEditor title="Team update" value="Share what you are working on this week." /></main> }\n}`,
|
||||
scheduling: `page SchedulingExample {\n view { <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Schedule a meeting</h1><p>Choose the date and time that work for your team.</p><DatePicker label="Meeting date" name="date" /><DatePicker type="datetime-local" label="Send reminder" name="reminder" value="2026-09-20T09:30" /><TimePicker label="Start time" name="time" value="09:30" /></main> }\n}`,
|
||||
"custom-modal": `page CustomModalExample {\n state dialogOpen: boolean = false\n view { <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Your own modal controls</h1><Button label="Invite a teammate" @click="dialogOpen = true" /><Modal open="{dialogOpen}" @close="dialogOpen = false" title="" description="" showFooter="true" cancelLabel="" confirmLabel=""><div data-slot="header"><h2>Invite a teammate</h2></div><Input label="Email address" type="email" name="invite-email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Cancel" variant="secondary" @click="dialogOpen = false" /><Button label="Done" @click="dialogOpen = false" /></div></Modal></main> }\n}`,
|
||||
"project-board": `page ProjectBoardExample {\n state tasks = [{label:"Review designs"},{label:"Build the dashboard"},{label:"Test accessibility"}]\n view { <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Project workspace</h1><DragAndDrop title="Priorities" description="Drag a row or use its arrow buttons." items="{tasks}" /><WysiwygEditor title="Team update" value="Share what you are working on this week." /></main> }\n}`,
|
||||
};
|
||||
for (const e of examples) { const old = join(pagesDir,'templates',e.slug+'.wrn'); if(existsSync(old)) unlinkSync(old); }
|
||||
const css = readFileSync(join(exampleRoot,'app/styles/workspace-preview.css'),'utf8');
|
||||
for(const e of examples) {
|
||||
const source = extra[e.slug] || readFileSync(join(exampleRoot,'examples',e.slug+'.wrn'),'utf8');
|
||||
const at = source.lastIndexOf('\n }');
|
||||
let rendered;
|
||||
if(at>=0) rendered = source.slice(0,at)+codePanel(source)+`<details class="example-code-panel"><summary>Page styles · copy with the example</summary><button type="button" data-copy-target="#example-styles">Copy CSS</button><pre><code id="example-styles">${escapeCode(css)}</code></pre></details>`+source.slice(at);
|
||||
else rendered = source.replace(/}\s*}\s*$/,codePanel(source)+' } }');
|
||||
rendered = rendered.replace(/\bview\s*\{/, 'view {\n<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav>');
|
||||
write(`preview/${e.slug}.wrn`, rendered);
|
||||
|
||||
for (const e of examples) {
|
||||
const old = join(pagesDir, "templates", e.slug + ".wrn");
|
||||
if (existsSync(old)) unlinkSync(old);
|
||||
}
|
||||
write('preview/index.wrn',page('PreviewIndex','Examples',`<header class="docs-intro"><span class="showcase-eyebrow">Ready to use</span><h1>Page examples</h1><p>Explore complete layouts, interact with the controls, and copy the source.</p></header>${cards(examples.map(e=>({...e,href:'/preview/'+e.slug})))}`));
|
||||
const css = readFileSync(join(exampleRoot, "app/styles/workspace-preview.css"), "utf8");
|
||||
for (const e of examples) {
|
||||
const source =
|
||||
extra[e.slug] || readFileSync(join(exampleRoot, "examples", e.slug + ".wrn"), "utf8");
|
||||
const at = source.lastIndexOf("\n }");
|
||||
let rendered;
|
||||
if (at >= 0)
|
||||
rendered =
|
||||
source.slice(0, at) +
|
||||
codePanel(source) +
|
||||
`<details class="example-code-panel"><summary>Page styles · copy with the example</summary><button type="button" data-copy-target="#example-styles">Copy CSS</button><pre><code id="example-styles">${escapeCode(css)}</code></pre></details>` +
|
||||
source.slice(at);
|
||||
else rendered = source.replace(/}\s*}\s*$/, codePanel(source) + " } }");
|
||||
rendered = rendered.replace(
|
||||
/\bview\s*\{/,
|
||||
'view {\n<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav>',
|
||||
);
|
||||
write(`preview/${e.slug}.wrn`, rendered);
|
||||
}
|
||||
write(
|
||||
"preview/index.wrn",
|
||||
page(
|
||||
"PreviewIndex",
|
||||
"Examples",
|
||||
`<header class="docs-intro"><span class="showcase-eyebrow">Ready to use</span><h1>Page examples</h1><p>Explore complete layouts, interact with the controls, and copy the source.</p></header>${cards(examples.map((e) => ({ ...e, href: "/preview/" + e.slug })))}`,
|
||||
),
|
||||
);
|
||||
const templateGroups = [
|
||||
{slug:'dashboards',title:'Dashboards & admin',icon:'layout-dashboard',description:'Analytics and account operations with meaningful metrics.',heading:'Workspace performance',body:`<MetricCard title="Active accounts" value="1,284" /><Chart title="Weekly activity" type="bar" data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":52}]' showLegend="false" /><Card title="Team access" description="Manage roles and permissions for your workspace." actionLabel="Manage team" actionHref="/preview/profile" />`},
|
||||
{slug:'commerce',title:'Commerce',icon:'shopping-bag',description:'A product collection with a working shopping bag.',heading:'Everyday essentials',body:`<p>Thoughtfully made tools for your desk.</p><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem"><Card title="Studio notebook" description="Dot grid · recycled paper" footer="$18"><Button label="Add notebook" @click="bag = bag + 1" /></Card><Card title="Desk organizer" description="Solid oak · natural finish" footer="$42"><Button label="Add organizer" @click="bag = bag + 1" /></Card><Card title="Travel tumbler" description="Insulated · 350 ml" footer="$24"><Button label="Add tumbler" @click="bag = bag + 1" /></Card></div><p role="status">Shopping bag: {bag} items</p><Button label="Clear bag" variant="secondary" @click="bag = 0" />`},
|
||||
{slug:'marketing',title:'Marketing websites',icon:'sparkles',description:'A SaaS landing page with benefits, pricing, and a clear next step.',heading:'Make room for your best work.',body:`<p>One calm workspace for projects, notes, and the people behind them.</p><Button label="Explore the workspace" href="/preview/workspace" /><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem"><Card title="Plan together" description="Turn your next idea into clear, shared priorities." /><Card title="Stay focused" description="Keep tasks, notes, and decisions in one place." /><Card title="Grow naturally" description="Start with your team. Add more space when you need it." /></div><Card title="Team plan" description="Everything your team needs to get started." footer="$19 / member / month" actionLabel="Get started" actionHref="/preview/sign-in" />`},
|
||||
{slug:'productivity',title:'Productivity',icon:'list-checks',description:'A planning workspace for priorities, deadlines, and notes.',heading:'Your week, in focus',body:`<DragAndDrop title="Priorities" items='[{"label":"Review the launch plan"},{"label":"Prepare customer interviews"},{"label":"Share the weekly update"}]' /><DatePicker label="Next milestone" name="milestone" /><WysiwygEditor title="Meeting notes" value="Capture decisions and next steps here." />`},
|
||||
{
|
||||
slug: "dashboards",
|
||||
title: "Dashboards & admin",
|
||||
icon: "layout-dashboard",
|
||||
description: "Analytics and account operations with meaningful metrics.",
|
||||
heading: "Workspace performance",
|
||||
body: `<MetricCard title="Active accounts" value="1,284" /><Chart title="Weekly activity" type="bar" data='[{"label":"Mon","value":24},{"label":"Tue","value":38},{"label":"Wed","value":52}]' showLegend="false" /><Card title="Team access" description="Manage roles and permissions for your workspace." actionLabel="Manage team" actionHref="/preview/profile" />`,
|
||||
},
|
||||
{
|
||||
slug: "commerce",
|
||||
title: "Commerce",
|
||||
icon: "shopping-bag",
|
||||
description: "A product collection with a working shopping bag.",
|
||||
heading: "Everyday essentials",
|
||||
body: `<p>Thoughtfully made tools for your desk.</p><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem"><Card title="Studio notebook" description="Dot grid · recycled paper" footer="$18"><Button label="Add notebook" @click="bag = bag + 1" /></Card><Card title="Desk organizer" description="Solid oak · natural finish" footer="$42"><Button label="Add organizer" @click="bag = bag + 1" /></Card><Card title="Travel tumbler" description="Insulated · 350 ml" footer="$24"><Button label="Add tumbler" @click="bag = bag + 1" /></Card></div><p role="status">Shopping bag: {bag} items</p><Button label="Clear bag" variant="secondary" @click="bag = 0" />`,
|
||||
},
|
||||
{
|
||||
slug: "marketing",
|
||||
title: "Marketing websites",
|
||||
icon: "sparkles",
|
||||
description: "A SaaS landing page with benefits, pricing, and a clear next step.",
|
||||
heading: "Make room for your best work.",
|
||||
body: `<p>One calm workspace for projects, notes, and the people behind them.</p><Button label="Explore the workspace" href="/preview/workspace" /><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.25rem"><Card title="Plan together" description="Turn your next idea into clear, shared priorities." /><Card title="Stay focused" description="Keep tasks, notes, and decisions in one place." /><Card title="Grow naturally" description="Start with your team. Add more space when you need it." /></div><Card title="Team plan" description="Everything your team needs to get started." footer="$19 / member / month" actionLabel="Get started" actionHref="/preview/sign-in" />`,
|
||||
},
|
||||
{
|
||||
slug: "productivity",
|
||||
title: "Productivity",
|
||||
icon: "list-checks",
|
||||
description: "A planning workspace for priorities, deadlines, and notes.",
|
||||
heading: "Your week, in focus",
|
||||
body: `<DragAndDrop title="Priorities" items='[{"label":"Review the launch plan"},{"label":"Prepare customer interviews"},{"label":"Share the weekly update"}]' /><DatePicker label="Next milestone" name="milestone" /><WysiwygEditor title="Meeting notes" value="Capture decisions and next steps here." />`,
|
||||
},
|
||||
];
|
||||
write('templates.wrn',page('Templates','Templates',`<header class="docs-intro"><span class="showcase-eyebrow">Start a product</span><h1>Templates for your next idea</h1><p>Four starting points with complete layouts and copyable source. Examples demonstrate controls; templates combine them into a product page.</p></header>${cards(templateGroups.map(e=>({...e,href:'/templates/'+e.slug})))}`));
|
||||
write(
|
||||
"templates.wrn",
|
||||
page(
|
||||
"Templates",
|
||||
"Templates",
|
||||
`<header class="docs-intro"><span class="showcase-eyebrow">Start a product</span><h1>Templates for your next idea</h1><p>Four starting points with complete layouts and copyable source. Examples demonstrate controls; templates combine them into a product page.</p></header>${cards(templateGroups.map((e) => ({ ...e, href: "/templates/" + e.slug })))}`,
|
||||
),
|
||||
);
|
||||
for (const t of templateGroups) {
|
||||
const source = `page ${t.slug.replace(/-/g,'')}Template {
|
||||
const source = `page ${t.slug.replace(/-/g, "")}Template {
|
||||
state bag: number = 0
|
||||
view { <main style="max-width:72rem;margin:3rem auto;padding:2rem;display:grid;gap:1.5rem"><h1>${t.heading}</h1>${t.body}</main> }
|
||||
}`;
|
||||
write(`templates/${t.slug}.wrn`, source.replace('view {', 'view {<nav class="example-toolbar"><a href="/templates">← All templates</a><a href="#example-source">View code</a></nav>').replace(/}\s*}\s*$/,codePanel(source)+' } }'));
|
||||
write(
|
||||
`templates/${t.slug}.wrn`,
|
||||
source
|
||||
.replace(
|
||||
"view {",
|
||||
'view {<nav class="example-toolbar"><a href="/templates">← All templates</a><a href="#example-source">View code</a></nav>',
|
||||
)
|
||||
.replace(/}\s*}\s*$/, codePanel(source) + " } }"),
|
||||
);
|
||||
}
|
||||
const blockCards=[];
|
||||
for(const c of blockComponents) {
|
||||
const slug=slugOf(c.name); resetHoistedObjects();
|
||||
const config=demoConfiguration(c,0);
|
||||
const mount=componentMount(c,0,config);
|
||||
const states=hoistedObjectStates();
|
||||
const source=`page ${c.name}Example {${states}\n view {\n ${mount}\n }\n}`;
|
||||
write(`blocks/${slug}.wrn`, `page ${c.name}Block {\n layout = "gallery"\n ${states}\n seo { title = "${displayName(c.name)} block" }\n view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>${displayName(c.name)}</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview">${mount}</section>${codePanel(source)} }\n}`);
|
||||
blockCards.push({title:displayName(c.name),description:c.purpose || 'A complete reusable page section.',icon:'layout-template',href:'/blocks/'+slug});
|
||||
const blockCards = [];
|
||||
for (const c of blockComponents) {
|
||||
const slug = slugOf(c.name);
|
||||
resetHoistedObjects();
|
||||
const config = demoConfiguration(c, 0);
|
||||
const mount = componentMount(c, 0, config);
|
||||
const states = hoistedObjectStates();
|
||||
const source = `page ${c.name}Example {${states}\n view {\n ${mount}\n }\n}`;
|
||||
write(
|
||||
`blocks/${slug}.wrn`,
|
||||
`page ${c.name}Block {\n layout = "gallery"\n ${states}\n seo { title = "${displayName(c.name)} block" }\n view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>${displayName(c.name)}</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview">${mount}</section>${codePanel(source)} }\n}`,
|
||||
);
|
||||
blockCards.push({
|
||||
title: displayName(c.name),
|
||||
description: c.purpose || "A complete reusable page section.",
|
||||
icon: "layout-template",
|
||||
href: "/blocks/" + slug,
|
||||
});
|
||||
}
|
||||
write('block-library.wrn',page('BlockLibrary','UI blocks',`<header class="docs-intro"><span class="showcase-eyebrow">Composed sections</span><h1>Ready-to-use blocks</h1><p>Real sections with live previews and complete source code.</p></header>${cards(blockCards)}`));
|
||||
write('blocks/index.wrn',page('BlocksIndex','UI blocks',cards(blockCards)));
|
||||
write(
|
||||
"block-library.wrn",
|
||||
page(
|
||||
"BlockLibrary",
|
||||
"UI blocks",
|
||||
`<header class="docs-intro"><span class="showcase-eyebrow">Composed sections</span><h1>Ready-to-use blocks</h1><p>Real sections with live previews and complete source code.</p></header>${cards(blockCards)}`,
|
||||
),
|
||||
);
|
||||
write("blocks/index.wrn", page("BlocksIndex", "UI blocks", cards(blockCards)));
|
||||
// Update internal guides to point to the moved block documentation.
|
||||
for(const directory of [pagesDir,join(pagesDir,'components')]) for(const file of readdirSync(directory).filter(f=>f.endsWith('.wrn'))) {
|
||||
const path=join(directory,file);let text=readFileSync(path,'utf8');
|
||||
for(const c of blockComponents) text=text.replaceAll('/components/'+slugOf(c.name),'/blocks/'+slugOf(c.name));
|
||||
if (text !== readFileSync(path,"utf8")) writeFileSync(path,text);
|
||||
}
|
||||
for (const directory of [pagesDir, join(pagesDir, "components")])
|
||||
for (const file of readdirSync(directory).filter((f) => f.endsWith(".wrn"))) {
|
||||
const path = join(directory, file);
|
||||
let text = readFileSync(path, "utf8");
|
||||
for (const c of blockComponents)
|
||||
text = text.replaceAll("/components/" + slugOf(c.name), "/blocks/" + slugOf(c.name));
|
||||
if (text !== readFileSync(path, "utf8")) writeFileSync(path, text);
|
||||
}
|
||||
}
|
||||
@@ -6,6 +6,13 @@ import prettier from "prettier";
|
||||
import { generateCatalogPages } from "./generate-catalog-pages.mjs";
|
||||
import { eventDescriptionFor, profileFor } from "./showcase-profiles.mjs";
|
||||
|
||||
// Keep generated WRN blank lines free of trailing whitespace.
|
||||
function writeGeneratedFile(path, source, encoding) {
|
||||
const content =
|
||||
typeof source === "string" && path.endsWith(".wrn") ? source.replace(/[ \t]+$/gm, "") : source;
|
||||
writeFileSync(path, content, encoding);
|
||||
}
|
||||
|
||||
const exampleRoot = join(dirname(fileURLToPath(import.meta.url)), "..");
|
||||
const workspaceRoot = join(exampleRoot, "..", "..");
|
||||
const referencePath = join(workspaceRoot, "packages", "ui", "component-reference.json");
|
||||
@@ -13,13 +20,34 @@ const pagesDir = join(exampleRoot, "app", "pages");
|
||||
const detailPagesDir = join(pagesDir, "components");
|
||||
const layoutsDir = join(exampleRoot, "app", "layouts");
|
||||
const reference = JSON.parse(readFileSync(referencePath, "utf8"));
|
||||
const excludedNames = new Set(["AuthForm", "AuthSplitLayout", "PortalDashboard", "PublicPageShell"]);
|
||||
const blockNames = new Set(["CTASection","Hero","HeroActions","SplitHero","FeatureCard","FeatureIconCard","FeatureGrid","MarketingSectionHeader","PageHeader","SectionHeader","AnnouncementBar","Footer","MetricGrid","StatsBar"]);
|
||||
const blockComponents = reference.components.filter(component => blockNames.has(component.name));
|
||||
reference.components = reference.components.filter(component => !excludedNames.has(component.name) && !blockNames.has(component.name));
|
||||
const excludedNames = new Set([
|
||||
"AuthForm",
|
||||
"AuthSplitLayout",
|
||||
"PortalDashboard",
|
||||
"PublicPageShell",
|
||||
]);
|
||||
const blockNames = new Set([
|
||||
"CTASection",
|
||||
"Hero",
|
||||
"HeroActions",
|
||||
"SplitHero",
|
||||
"FeatureCard",
|
||||
"FeatureIconCard",
|
||||
"FeatureGrid",
|
||||
"MarketingSectionHeader",
|
||||
"PageHeader",
|
||||
"SectionHeader",
|
||||
"AnnouncementBar",
|
||||
"Footer",
|
||||
"MetricGrid",
|
||||
"StatsBar",
|
||||
]);
|
||||
const blockComponents = reference.components.filter((component) => blockNames.has(component.name));
|
||||
reference.components = reference.components.filter(
|
||||
(component) => !excludedNames.has(component.name) && !blockNames.has(component.name),
|
||||
);
|
||||
reference.count = reference.components.length;
|
||||
|
||||
|
||||
const interactiveOverlayComponents = new Set([
|
||||
"ContextMenu",
|
||||
"Drawer",
|
||||
@@ -283,21 +311,186 @@ function defaultValue(prop) {
|
||||
function sampleValue(prop, component, variation) {
|
||||
const name = prop.name.toLowerCase();
|
||||
const curated = {
|
||||
ChatBubble: { title:"", description:"", showMetadata:true, showAvatars:false, items:[{text:"Hi Maya, is the new dashboard ready to review?",direction:"incoming",timestamp:"10:24"},{text:"Yes! I have shared the latest version with you.",direction:"outgoing",timestamp:"10:25",receipt:"read"},{text:"Thanks, I will take a look this afternoon.",direction:"incoming",timestamp:"10:26"},{text:"Great. The release notes are attached too.",direction:"outgoing",timestamp:"10:27",receipt:"delivered"},{text:"One more screenshot coming up.",direction:"outgoing",timestamp:"10:28",receipt:"sent"},{text:"Uploading the final export now.",direction:"outgoing",timestamp:"10:29",receipt:"sending"},{text:"Here is the invoice PDF.",direction:"outgoing",timestamp:"10:30",receipt:"failed",status:"Not delivered",actionLabel:"Retry"}] },
|
||||
FileUploadProgress: { label:"Upload progress",fileName:"brand-guidelines.pdf",fileSize:"4.8 MB",uploadedSize:variation === 0 ? "2.4 MB" : "",value:variation === 2 ? 100 : 50,status:["uploading","error","complete"][variation % 3] },
|
||||
ListGroup: {title:"Workspace",value:"inbox",items:[{value:"inbox",label:"Inbox",description:"Messages that need your attention",icon:"icon-[lucide--inbox]",badge:"8"},{value:"projects",label:"Projects",description:"Your team's active work",icon:"icon-[lucide--folder]"},{value:"archive",label:"Archive",description:"Completed conversations",icon:"icon-[lucide--archive]"}]},
|
||||
Rating: {title:"How was your experience?",value:variation === 1 ? 3 : 4,readonly:variation === 2},
|
||||
StyledIcon: {icon:["icon-[lucide--sparkles]","icon-[lucide--check]","icon-[lucide--shield-check]"][variation % 3],label:"Verified",color:variation === 1 ? "success" : "primary",variant:variation === 2 ? "outline" : "default",size:variation === 1 ? "sm" : "default"},
|
||||
TreeView: {title:"Project files",defaultExpanded:["src"],items:[{value:"src",label:"src",children:[{value:"pages",label:"pages",children:[{value:"home",label:"index.wrn"}]},{value:"styles",label:"styles.css"}]},{value:"readme",label:"README.md"}]},
|
||||
InputGroup: {name:"workspace-url",label:"Workspace address",placeholder:"your-team",startText:variation === 0 ? "https://" : "",endText:variation === 0 ? ".example.com" : "",icon:variation === 1 ? "icon-[lucide--search]" : "",actionLabel:variation === 1 ? "Search" : "",value:""},
|
||||
RangeSlider: {name:"volume",label:"Volume",value:40,showBounds:true,showValue:true,marks:[]},
|
||||
Chart: {title:"Weekly activity",description:"Completed tasks this week",items:[{label:"Mon",value:24},{label:"Tue",value:38},{label:"Wed",value:29},{label:"Thu",value:52},{label:"Fri",value:45}],height:220,showLegend:variation === 2},
|
||||
Clipboard: {title:"",description:"",label:"Copy",value:"npm install @wrnexus/ui",iconOnly:variation !== 0},
|
||||
Confetti: {label:"Celebrate milestone",count:40,duration:1400},
|
||||
DataMap: {title:"Activity by team",description:"Select a tile to inspect its activity score.",items:[{label:"Design",value:32},{label:"Engineering",value:84},{label:"Support",value:56},{label:"Sales",value:45},{label:"Marketing",value:68},{label:"Operations",value:20}]},
|
||||
DragAndDrop: {title:"Project priorities",description:"Drag to reorder, or use the arrow buttons.",items:[{label:"Review designs"},{label:"Build the dashboard"},{label:"Test accessibility"},{label:"Prepare release notes"}]},
|
||||
WysiwygEditor: {title:"Project update",description:"",value:"Share progress, decisions, and next steps with your team.",readonly:variation === 2},
|
||||
BackToTop: {label:"Back to top"},
|
||||
ChatBubble: {
|
||||
title: "",
|
||||
description: "",
|
||||
showMetadata: true,
|
||||
showAvatars: false,
|
||||
items: [
|
||||
{
|
||||
text: "Hi Maya, is the new dashboard ready to review?",
|
||||
direction: "incoming",
|
||||
timestamp: "10:24",
|
||||
},
|
||||
{
|
||||
text: "Yes! I have shared the latest version with you.",
|
||||
direction: "outgoing",
|
||||
timestamp: "10:25",
|
||||
receipt: "read",
|
||||
},
|
||||
{
|
||||
text: "Thanks, I will take a look this afternoon.",
|
||||
direction: "incoming",
|
||||
timestamp: "10:26",
|
||||
},
|
||||
{
|
||||
text: "Great. The release notes are attached too.",
|
||||
direction: "outgoing",
|
||||
timestamp: "10:27",
|
||||
receipt: "delivered",
|
||||
},
|
||||
{
|
||||
text: "One more screenshot coming up.",
|
||||
direction: "outgoing",
|
||||
timestamp: "10:28",
|
||||
receipt: "sent",
|
||||
},
|
||||
{
|
||||
text: "Uploading the final export now.",
|
||||
direction: "outgoing",
|
||||
timestamp: "10:29",
|
||||
receipt: "sending",
|
||||
},
|
||||
{
|
||||
text: "Here is the invoice PDF.",
|
||||
direction: "outgoing",
|
||||
timestamp: "10:30",
|
||||
receipt: "failed",
|
||||
status: "Not delivered",
|
||||
actionLabel: "Retry",
|
||||
},
|
||||
],
|
||||
},
|
||||
FileUploadProgress: {
|
||||
label: "Upload progress",
|
||||
fileName: "brand-guidelines.pdf",
|
||||
fileSize: "4.8 MB",
|
||||
uploadedSize: variation === 0 ? "2.4 MB" : "",
|
||||
value: variation === 2 ? 100 : 50,
|
||||
status: ["uploading", "error", "complete"][variation % 3],
|
||||
},
|
||||
ListGroup: {
|
||||
title: "Workspace",
|
||||
value: "inbox",
|
||||
items: [
|
||||
{
|
||||
value: "inbox",
|
||||
label: "Inbox",
|
||||
description: "Messages that need your attention",
|
||||
icon: "icon-[lucide--inbox]",
|
||||
badge: "8",
|
||||
},
|
||||
{
|
||||
value: "projects",
|
||||
label: "Projects",
|
||||
description: "Your team's active work",
|
||||
icon: "icon-[lucide--folder]",
|
||||
},
|
||||
{
|
||||
value: "archive",
|
||||
label: "Archive",
|
||||
description: "Completed conversations",
|
||||
icon: "icon-[lucide--archive]",
|
||||
},
|
||||
],
|
||||
},
|
||||
Rating: {
|
||||
title: "How was your experience?",
|
||||
value: variation === 1 ? 3 : 4,
|
||||
readonly: variation === 2,
|
||||
},
|
||||
StyledIcon: {
|
||||
icon: ["icon-[lucide--sparkles]", "icon-[lucide--check]", "icon-[lucide--shield-check]"][
|
||||
variation % 3
|
||||
],
|
||||
label: "Verified",
|
||||
color: variation === 1 ? "success" : "primary",
|
||||
variant: variation === 2 ? "outline" : "default",
|
||||
size: variation === 1 ? "sm" : "default",
|
||||
},
|
||||
TreeView: {
|
||||
title: "Project files",
|
||||
defaultExpanded: ["src"],
|
||||
items: [
|
||||
{
|
||||
value: "src",
|
||||
label: "src",
|
||||
children: [
|
||||
{ value: "pages", label: "pages", children: [{ value: "home", label: "index.wrn" }] },
|
||||
{ value: "styles", label: "styles.css" },
|
||||
],
|
||||
},
|
||||
{ value: "readme", label: "README.md" },
|
||||
],
|
||||
},
|
||||
InputGroup: {
|
||||
name: "workspace-url",
|
||||
label: "Workspace address",
|
||||
placeholder: "your-team",
|
||||
startText: variation === 0 ? "https://" : "",
|
||||
endText: variation === 0 ? ".example.com" : "",
|
||||
icon: variation === 1 ? "icon-[lucide--search]" : "",
|
||||
actionLabel: variation === 1 ? "Search" : "",
|
||||
value: "",
|
||||
},
|
||||
RangeSlider: {
|
||||
name: "volume",
|
||||
label: "Volume",
|
||||
value: 40,
|
||||
showBounds: true,
|
||||
showValue: true,
|
||||
marks: [],
|
||||
},
|
||||
Chart: {
|
||||
title: "Weekly activity",
|
||||
description: "Completed tasks this week",
|
||||
items: [
|
||||
{ label: "Mon", value: 24 },
|
||||
{ label: "Tue", value: 38 },
|
||||
{ label: "Wed", value: 29 },
|
||||
{ label: "Thu", value: 52 },
|
||||
{ label: "Fri", value: 45 },
|
||||
],
|
||||
height: 220,
|
||||
showLegend: variation === 2,
|
||||
},
|
||||
Clipboard: {
|
||||
title: "",
|
||||
description: "",
|
||||
label: "Copy",
|
||||
value: "npm install @wrnexus/ui",
|
||||
iconOnly: variation !== 0,
|
||||
},
|
||||
Confetti: { label: "Celebrate milestone", count: 40, duration: 1400 },
|
||||
DataMap: {
|
||||
title: "Activity by team",
|
||||
description: "Select a tile to inspect its activity score.",
|
||||
items: [
|
||||
{ label: "Design", value: 32 },
|
||||
{ label: "Engineering", value: 84 },
|
||||
{ label: "Support", value: 56 },
|
||||
{ label: "Sales", value: 45 },
|
||||
{ label: "Marketing", value: 68 },
|
||||
{ label: "Operations", value: 20 },
|
||||
],
|
||||
},
|
||||
DragAndDrop: {
|
||||
title: "Project priorities",
|
||||
description: "Drag to reorder, or use the arrow buttons.",
|
||||
items: [
|
||||
{ label: "Review designs" },
|
||||
{ label: "Build the dashboard" },
|
||||
{ label: "Test accessibility" },
|
||||
{ label: "Prepare release notes" },
|
||||
],
|
||||
},
|
||||
WysiwygEditor: {
|
||||
title: "Project update",
|
||||
description: "",
|
||||
value: "Share progress, decisions, and next steps with your team.",
|
||||
readonly: variation === 2,
|
||||
},
|
||||
BackToTop: { label: "Back to top" },
|
||||
|
||||
Pagination: {
|
||||
label: "Pagination",
|
||||
@@ -780,7 +973,13 @@ function sourceSnippet(component, variation, overrides = {}) {
|
||||
if (value === undefined || value === "" || prop.name === "class") return [];
|
||||
if (prop.type.includes("[]")) {
|
||||
let data = value;
|
||||
if (typeof data === "string") { try { data = JSON.parse(data); } catch {} }
|
||||
if (typeof data === "string") {
|
||||
try {
|
||||
data = JSON.parse(data);
|
||||
} catch {
|
||||
/* Keep non-JSON examples as their original strings. */
|
||||
}
|
||||
}
|
||||
if (Array.isArray(data)) {
|
||||
declarations.push(` state ${prop.name} = ${JSON.stringify(data, null, 2)}`);
|
||||
return [`${prop.name}="{${prop.name}}"`];
|
||||
@@ -824,7 +1023,14 @@ function sourceSnippet(component, variation, overrides = {}) {
|
||||
: formattedAttributes
|
||||
? `<${component.mount}${formattedAttributes}\n/>`
|
||||
: `<${component.mount} />`;
|
||||
return escapeCode(declarations.length ? `page ${identifier(component.name)}Example {\n${declarations.join("\n")}\n view {\n${indentSource(source,4)}\n }\n}`.replaceAll("\\n", "\n") : source);
|
||||
return escapeCode(
|
||||
declarations.length
|
||||
? `page ${identifier(component.name)}Example {\n${declarations.join("\n")}\n view {\n${indentSource(source, 4)}\n }\n}`.replaceAll(
|
||||
"\\n",
|
||||
"\n",
|
||||
)
|
||||
: source,
|
||||
);
|
||||
}
|
||||
|
||||
const mountAttribute = `data-component="${component.mount}"`;
|
||||
@@ -863,6 +1069,7 @@ function playgroundStateName(prop) {
|
||||
|
||||
function isStructuredProp(prop) {
|
||||
return (
|
||||
(prop.name === "data" && prop.type === "unknown") ||
|
||||
(prop.default ?? "").startsWith("[") ||
|
||||
prop.default === "[]" ||
|
||||
prop.default === "{}" ||
|
||||
@@ -1930,7 +2137,7 @@ layout Showcase {
|
||||
<label class="docs-search"><span class="icon-[lucide--search] size-4" aria-hidden="true"></span><input type="search" placeholder="Search documentation..." data-docs-search /><kbd>⌘ K</kbd></label>
|
||||
</div>
|
||||
<div class="showcase-header-end">
|
||||
<nav aria-label="Primary navigation" class="showcase-nav"><a href="/preview">Examples</a><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav>
|
||||
<nav aria-label="Primary navigation" class="showcase-nav"><a href="/preview">Examples</a><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a><a href="/design-studio/" data-no-nav>Design Studio</a></nav>
|
||||
<button type="button" class="showcase-theme" data-design-panel-toggle aria-label="Customize design"><span class="icon-[lucide--palette] size-5" aria-hidden="true"></span></button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1991,8 +2198,8 @@ layout Document {
|
||||
mkdirSync(pagesDir, { recursive: true });
|
||||
mkdirSync(detailPagesDir, { recursive: true });
|
||||
mkdirSync(layoutsDir, { recursive: true });
|
||||
writeFileSync(join(layoutsDir, "showcase.wrn"), showcaseLayout(), "utf8");
|
||||
writeFileSync(join(layoutsDir, "document.wrn"), documentLayout(), "utf8");
|
||||
writeGeneratedFile(join(layoutsDir, "showcase.wrn"), showcaseLayout(), "utf8");
|
||||
writeGeneratedFile(join(layoutsDir, "document.wrn"), documentLayout(), "utf8");
|
||||
for (const file of readdirSync(pagesDir).filter((entry) => entry.endsWith(".wrn"))) {
|
||||
unlinkSync(join(pagesDir, file));
|
||||
}
|
||||
@@ -2001,9 +2208,9 @@ for (const file of readdirSync(detailPagesDir).filter((entry) => entry.endsWith(
|
||||
}
|
||||
|
||||
for (const [category, components] of categoryEntries) {
|
||||
writeFileSync(join(pagesDir, `${category}.wrn`), categoryPage(category, components), "utf8");
|
||||
writeGeneratedFile(join(pagesDir, `${category}.wrn`), categoryPage(category, components), "utf8");
|
||||
for (const component of components) {
|
||||
writeFileSync(
|
||||
writeGeneratedFile(
|
||||
join(detailPagesDir, `${slugOf(component.name)}.wrn`),
|
||||
detailPage(component, components),
|
||||
"utf8",
|
||||
@@ -2014,7 +2221,11 @@ for (const [category, components] of categoryEntries) {
|
||||
const showcaseManifest = {
|
||||
generatedFrom: "packages/ui/component-reference.json",
|
||||
removed: [...excludedNames],
|
||||
blocks: blockComponents.map(component => ({ name: component.name, slug: slugOf(component.name), path: `/blocks/${slugOf(component.name)}` })),
|
||||
blocks: blockComponents.map((component) => ({
|
||||
name: component.name,
|
||||
slug: slugOf(component.name),
|
||||
path: `/blocks/${slugOf(component.name)}`,
|
||||
})),
|
||||
componentCount: reference.count,
|
||||
categoryCount: categoryEntries.length,
|
||||
totalDemoCount,
|
||||
@@ -2036,7 +2247,7 @@ const formattedManifest = await prettier.format(`${JSON.stringify(showcaseManife
|
||||
printWidth: 100,
|
||||
endOfLine: "lf",
|
||||
});
|
||||
writeFileSync(join(exampleRoot, "showcase-manifest.json"), formattedManifest, "utf8");
|
||||
writeGeneratedFile(join(exampleRoot, "showcase-manifest.json"), formattedManifest, "utf8");
|
||||
|
||||
const categoryCards = categoryEntries
|
||||
.map(
|
||||
@@ -2045,7 +2256,7 @@ const categoryCards = categoryEntries
|
||||
)
|
||||
.join("");
|
||||
|
||||
writeFileSync(
|
||||
writeGeneratedFile(
|
||||
join(pagesDir, "index.wrn"),
|
||||
`// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page ComponentShowcase {
|
||||
@@ -2126,7 +2337,7 @@ const docsSections = [
|
||||
"Use the component API pages, blocks, and templates as production starting points.",
|
||||
],
|
||||
];
|
||||
writeFileSync(
|
||||
writeGeneratedFile(
|
||||
join(pagesDir, "docs.wrn"),
|
||||
`page Documentation {
|
||||
layout = "showcase"
|
||||
@@ -2261,7 +2472,7 @@ const v06Guides = [
|
||||
],
|
||||
];
|
||||
for (const [slug, title, description, sections] of v06Guides) {
|
||||
writeFileSync(
|
||||
writeGeneratedFile(
|
||||
join(pagesDir, `v06-${slug}.wrn`),
|
||||
`// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page V06${identifier(title)}Guide {
|
||||
@@ -2285,15 +2496,51 @@ page V06${identifier(title)}Guide {
|
||||
}
|
||||
|
||||
const practicalGuides = {
|
||||
installation: {heading:"Render your first component", copy:"Import the shared UI stylesheet in your application entry. In a WRN page, use registered components directly. Keep user-editable values in page state and listen to typed outputs.", code:'import "@wrnexus/ui/ui.css"\n\npage Welcome {\n view { <Button label="Get started" href="/preview" /> }\n}'},
|
||||
"framework-guides": {heading:"Connect a field to page state",copy:"Props supply initial configuration. Output handlers receive payload directly. Use payload.value to update your page state and display the committed result.",code:'page NameForm {\n state name: string = ""\n view { <Input label="Your name" value="{name}" @input="name = payload.value" /><p>Hello {name}</p> }\n}'},
|
||||
accessibility: {heading:"Label controls and explain errors",copy:"Give every control a visible label. Use helperText for instructions and error for actionable feedback. Test Tab, Shift+Tab, Enter and Escape; focus must remain visible and follow the reading order.",code:'<Input label="Email address" type="email" name="email" required="true" helperText="Use your work email." error="Enter a valid email address." />\n<Button label="Save changes" disabled="true" />'},
|
||||
"dark-mode": {heading:"Use semantic colors in both modes",copy:"Use shared surface, text, border and focus tokens instead of hard-coded white and black. Check disabled, hover, selected and error states in both themes using the appearance control.",code:'.panel { background: var(--wrn-color-surface); color: var(--wrn-color-text); border: 1px solid var(--wrn-color-border); }'},
|
||||
themes: {heading:"Keep theme overrides in one place",copy:"Override design tokens at your application root so all components inherit the same appearance. Start with radius and brand color, then review overlays, forms and navigation together.",code:':root { --wrn-radius: 8px; --wrn-color-primary: #7c3aed; }\n<Button label="Primary action" color="primary" />'},
|
||||
colors: {heading:"Choose color by meaning",copy:"Use primary for the main action, danger for destructive actions and success for completion. Always include text or an icon so color is not the only signal.",code:'<Button label="Save" color="primary" />\n<Button label="Delete record" color="danger" />\n<Badge label="Active" color="success" />'},
|
||||
fonts: {heading:"Set one application font",copy:"Components inherit the shared font family. Supply a font stack once; use font weights and spacing to establish hierarchy instead of enlarging every label.",code:':root { --wrn-font-sans: "Inter", system-ui, sans-serif; }\nbody { font-family: var(--wrn-font-sans); }'},
|
||||
sizing: {heading:"Match density to the task",copy:"Use compact controls for dense toolbars and tables, and the default size for forms. Keep related controls at the same size and retain usable touch targets on small screens.",code:'<Button label="Filter" size="sm" />\n<Input label="Project name" size="default" />\n<RangeSlider label="Scale" min="0" max="5" step="0.2" value="2.4" />'},
|
||||
resources: {heading:"Choose the right starting point",copy:"Component pages document individual controls. Blocks combine controls into sections. Examples demonstrate complete workflows. Templates provide product-oriented starting pages with source you can adapt.",code:'// DataTable accepts arrays directly through bindings.\nstate rows = [{ id: 1, name: "Northwind" }]\nstate columns = [{ key: "name", label: "Account" }]\n<DataTable rows="{rows}" columns="{columns}" />'}
|
||||
installation: {
|
||||
heading: "Render your first component",
|
||||
copy: "Import the shared UI stylesheet in your application entry. In a WRN page, use registered components directly. Keep user-editable values in page state and listen to typed outputs.",
|
||||
code: 'import "@wrnexus/ui/ui.css"\n\npage Welcome {\n view { <Button label="Get started" href="/preview" /> }\n}',
|
||||
},
|
||||
"framework-guides": {
|
||||
heading: "Connect a field to page state",
|
||||
copy: "Props supply initial configuration. Output handlers receive payload directly. Use payload.value to update your page state and display the committed result.",
|
||||
code: 'page NameForm {\n state name: string = ""\n view { <Input label="Your name" value="{name}" @input="name = payload.value" /><p>Hello {name}</p> }\n}',
|
||||
},
|
||||
accessibility: {
|
||||
heading: "Label controls and explain errors",
|
||||
copy: "Give every control a visible label. Use helperText for instructions and error for actionable feedback. Test Tab, Shift+Tab, Enter and Escape; focus must remain visible and follow the reading order.",
|
||||
code: '<Input label="Email address" type="email" name="email" required="true" helperText="Use your work email." error="Enter a valid email address." />\n<Button label="Save changes" disabled="true" />',
|
||||
},
|
||||
"dark-mode": {
|
||||
heading: "Use semantic colors in both modes",
|
||||
copy: "Use shared surface, text, border and focus tokens instead of hard-coded white and black. Check disabled, hover, selected and error states in both themes using the appearance control.",
|
||||
code: ".panel { background: var(--wrn-color-surface); color: var(--wrn-color-text); border: 1px solid var(--wrn-color-border); }",
|
||||
},
|
||||
themes: {
|
||||
heading: "Keep theme overrides in one place",
|
||||
copy: "Override design tokens at your application root so all components inherit the same appearance. Start with radius and brand color, then review overlays, forms and navigation together.",
|
||||
code: ':root { --wrn-radius: 8px; --wrn-color-primary: #7c3aed; }\n<Button label="Primary action" color="primary" />',
|
||||
},
|
||||
colors: {
|
||||
heading: "Choose color by meaning",
|
||||
copy: "Use primary for the main action, danger for destructive actions and success for completion. Always include text or an icon so color is not the only signal.",
|
||||
code: '<Button label="Save" color="primary" />\n<Button label="Delete record" color="danger" />\n<Badge label="Active" color="success" />',
|
||||
},
|
||||
fonts: {
|
||||
heading: "Set one application font",
|
||||
copy: "Components inherit the shared font family. Supply a font stack once; use font weights and spacing to establish hierarchy instead of enlarging every label.",
|
||||
code: ':root { --wrn-font-sans: "Inter", system-ui, sans-serif; }\nbody { font-family: var(--wrn-font-sans); }',
|
||||
},
|
||||
sizing: {
|
||||
heading: "Match density to the task",
|
||||
copy: "Use compact controls for dense toolbars and tables, and the default size for forms. Keep related controls at the same size and retain usable touch targets on small screens.",
|
||||
code: '<Button label="Filter" size="sm" />\n<Input label="Project name" size="default" />\n<RangeSlider label="Scale" min="0" max="5" step="0.2" value="2.4" />',
|
||||
},
|
||||
resources: {
|
||||
heading: "Choose the right starting point",
|
||||
copy: "Component pages document individual controls. Blocks combine controls into sections. Examples demonstrate complete workflows. Templates provide product-oriented starting pages with source you can adapt.",
|
||||
code: '// DataTable accepts arrays directly through bindings.\nstate rows = [{ id: 1, name: "Northwind" }]\nstate columns = [{ key: "name", label: "Account" }]\n<DataTable rows="{rows}" columns="{columns}" />',
|
||||
},
|
||||
};
|
||||
const customizationGuides = new Set(["dark-mode", "themes", "colors", "fonts", "sizing"]);
|
||||
for (const [slug, title, description, code] of docsSections) {
|
||||
@@ -2334,7 +2581,7 @@ for (const [slug, title, description, code] of docsSections) {
|
||||
"The setting is inherited by components, blocks, templates, and playground previews.",
|
||||
],
|
||||
];
|
||||
writeFileSync(
|
||||
writeGeneratedFile(
|
||||
join(pagesDir, `${slug}.wrn`),
|
||||
`page ${identifier(slug)}Guide {
|
||||
layout = "showcase"
|
||||
@@ -2399,7 +2646,7 @@ const blockCards = [
|
||||
],
|
||||
];
|
||||
// Keep /blocks for the generated Blocks component category.
|
||||
writeFileSync(
|
||||
writeGeneratedFile(
|
||||
join(pagesDir, "block-library.wrn"),
|
||||
`page BlockLibrary {
|
||||
layout = "showcase"
|
||||
@@ -2448,7 +2695,7 @@ const templates = [
|
||||
"Accounts, transactions, reporting, transfers, and controls.",
|
||||
],
|
||||
];
|
||||
writeFileSync(
|
||||
writeGeneratedFile(
|
||||
join(pagesDir, "templates.wrn"),
|
||||
`page Templates {
|
||||
layout = "showcase"
|
||||
@@ -2469,4 +2716,17 @@ process.stdout.write(
|
||||
`Generated ${reference.count} component detail pages, ${totalDemoCount} live demos, and ${categoryEntries.length} category pages.\n`,
|
||||
);
|
||||
|
||||
await generateCatalogPages({ exampleRoot, pagesDir, blockComponents, componentMount, sourceSnippet, demoConfiguration, slugOf, displayName, escapeCode, escapeText, resetHoistedObjects, hoistedObjectStates });
|
||||
await generateCatalogPages({
|
||||
exampleRoot,
|
||||
pagesDir,
|
||||
blockComponents,
|
||||
componentMount,
|
||||
sourceSnippet,
|
||||
demoConfiguration,
|
||||
slugOf,
|
||||
displayName,
|
||||
escapeCode,
|
||||
escapeText,
|
||||
resetHoistedObjects,
|
||||
hoistedObjectStates,
|
||||
});
|
||||
@@ -2873,7 +2873,10 @@ export const componentProfiles = {
|
||||
},
|
||||
),
|
||||
],
|
||||
options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline", "minimal", "compact", "alternate"] },
|
||||
options: {
|
||||
size: ["sm", "default", "lg"],
|
||||
variant: ["default", "soft", "raised", "outline", "minimal", "compact", "alternate"],
|
||||
},
|
||||
},
|
||||
|
||||
Typography: {
|
||||
@@ -2958,28 +2961,280 @@ const genericEventDescriptions = {
|
||||
toggle: "Fires when the component changes between open and closed or on and off states.",
|
||||
};
|
||||
|
||||
|
||||
componentProfiles.Card.demos.push(
|
||||
standard("Image with footer", "A cover image, concise body, and separate footer.", {title:"Design your next chapter",description:"A practical guide to building thoughtful products.",imageSrc:"/showcase-images/green-hero.svg",imageAlt:"Green abstract cover",footer:"6 min read",actionLabel:"Read guide",actionHref:"#guide"}),
|
||||
compact("Without a header", "Body content with an optional footer; no reserved heading space.", {title:"",description:"Your workspace is ready. Invite your teammates to get started.",footer:"Updated just now"}, {default:""}),
|
||||
advanced("Image-only card", "A simple image surface without header or footer chrome.", {title:"",description:"",imageSrc:"/showcase-images/blue-mountain.svg",imageAlt:"Blue geometric landscape"}, {default:""}),
|
||||
standard("Image with footer", "A cover image, concise body, and separate footer.", {
|
||||
title: "Design your next chapter",
|
||||
description: "A practical guide to building thoughtful products.",
|
||||
imageSrc: "/showcase-images/green-hero.svg",
|
||||
imageAlt: "Green abstract cover",
|
||||
footer: "6 min read",
|
||||
actionLabel: "Read guide",
|
||||
actionHref: "#guide",
|
||||
}),
|
||||
compact(
|
||||
"Without a header",
|
||||
"Body content with an optional footer; no reserved heading space.",
|
||||
{
|
||||
title: "",
|
||||
description: "Your workspace is ready. Invite your teammates to get started.",
|
||||
footer: "Updated just now",
|
||||
},
|
||||
{ default: "" },
|
||||
),
|
||||
advanced(
|
||||
"Image-only card",
|
||||
"A simple image surface without header or footer chrome.",
|
||||
{
|
||||
title: "",
|
||||
description: "",
|
||||
imageSrc: "/showcase-images/blue-mountain.svg",
|
||||
imageAlt: "Blue geometric landscape",
|
||||
},
|
||||
{ default: "" },
|
||||
),
|
||||
);
|
||||
componentProfiles.Map = { demos:[
|
||||
standard("OpenStreetMap", "A real interactive geographic map. Set latitude, longitude and zoomLevel; no API key is needed.", {title:"Bengaluru",description:"Pan and zoom to explore the city",provider:"openstreetmap",latitude:12.9716,longitude:77.5946,zoomLevel:13,imageSrc:"",items:[]}),
|
||||
compact("Google Maps", "Pass your restricted Maps Embed API key and a place query to show Google Maps.", {title:"Google Maps",provider:"google",apiKey:"",query:"Bengaluru",imageSrc:"",items:[]}),
|
||||
], playground:{title:"Bengaluru",description:"Interactive geographic map",provider:"openstreetmap",latitude:12.9716,longitude:77.5946,zoomLevel:13,imageSrc:"",items:[]}, options:{provider:["openstreetmap","google"]} };
|
||||
componentProfiles.Rating = {demos:[standard("Whole stars", "Choose a rating from zero to five with step 1.",{title:"Rate your experience",value:3,step:1}),compact("Half stars", "Click a half star or use the precise slider and arrow keys.",{title:"Half-star rating",value:3.5,step:0.5}),advanced("Fine increments", "Use increments of 0.2 for a more precise rating.",{title:"Detailed score",value:4.2,step:0.2})]};
|
||||
componentProfiles.LegendIndicator = {demos:[standard("Chart legend", "Toggle a series and handle @toggle to update your chart.",{title:"Traffic sources",description:"Select a source to toggle its visibility.",items:[{label:"Direct",color:"#8b5cf6",value:"42%"},{label:"Search",color:"#14b8a6",value:"35%"},{label:"Referral",color:"#f59e0b",value:"23%"}]})]};
|
||||
componentProfiles.Chart = {demos:[standard("Bar chart", "Pass an array of label/value objects through data.",{title:"Weekly signups",type:"bar",data:[{label:"Mon",value:24},{label:"Tue",value:38},{label:"Wed",value:29},{label:"Thu",value:52},{label:"Fri",value:45}],items:[],showLegend:false}),compact("Line chart", "Use type=line to compare a trend over time.",{title:"Monthly revenue",type:"line",data:[{label:"Jan",value:20},{label:"Feb",value:35},{label:"Mar",value:28},{label:"Apr",value:55}],items:[],showLegend:false})],options:{type:["bar","line"]}};
|
||||
componentProfiles.DatePicker = { demos:[
|
||||
standard("Date picker", "An anchored calendar that does not move surrounding content.", {label:"Start date",name:"start-date",type:"date"}),
|
||||
compact("Date and time", "Choose a calendar date and a time in one field.", {label:"Schedule for",name:"schedule",type:"datetime-local",value:"2026-09-20T09:30"}),
|
||||
advanced("Disabled date", "A read-only scheduled date.", {label:"Scheduled date",readonly:true}),
|
||||
], options:{type:["date","datetime-local"]} };
|
||||
componentProfiles.TimePicker = { demos:[standard("Time picker", "Choose an hour and minute in an anchored panel.", {label:"Meeting time",name:"meeting-time",value:"09:30"})] };
|
||||
componentProfiles.Map = {
|
||||
demos: [
|
||||
standard(
|
||||
"OpenStreetMap",
|
||||
"A real interactive geographic map. Set latitude, longitude and zoomLevel; no API key is needed.",
|
||||
{
|
||||
title: "Bengaluru",
|
||||
description: "Pan and zoom to explore the city",
|
||||
provider: "openstreetmap",
|
||||
latitude: 12.9716,
|
||||
longitude: 77.5946,
|
||||
zoomLevel: 13,
|
||||
imageSrc: "",
|
||||
items: [],
|
||||
},
|
||||
),
|
||||
compact(
|
||||
"Google Maps",
|
||||
"Pass your restricted Maps Embed API key and a place query to show Google Maps.",
|
||||
{
|
||||
title: "Google Maps",
|
||||
provider: "google",
|
||||
apiKey: "",
|
||||
query: "Bengaluru",
|
||||
imageSrc: "",
|
||||
items: [],
|
||||
},
|
||||
),
|
||||
],
|
||||
playground: {
|
||||
title: "Bengaluru",
|
||||
description: "Interactive geographic map",
|
||||
provider: "openstreetmap",
|
||||
latitude: 12.9716,
|
||||
longitude: 77.5946,
|
||||
zoomLevel: 13,
|
||||
imageSrc: "",
|
||||
items: [],
|
||||
},
|
||||
options: { provider: ["openstreetmap", "google"] },
|
||||
};
|
||||
componentProfiles.Rating = {
|
||||
demos: [
|
||||
standard("Whole stars", "Choose a rating from zero to five with step 1.", {
|
||||
title: "Rate your experience",
|
||||
value: 3,
|
||||
step: 1,
|
||||
}),
|
||||
compact("Half stars", "Click a half star or use the precise slider and arrow keys.", {
|
||||
title: "Half-star rating",
|
||||
value: 3.5,
|
||||
step: 0.5,
|
||||
}),
|
||||
advanced("Fine increments", "Use increments of 0.2 for a more precise rating.", {
|
||||
title: "Detailed score",
|
||||
value: 4.2,
|
||||
step: 0.2,
|
||||
}),
|
||||
],
|
||||
};
|
||||
componentProfiles.LegendIndicator = {
|
||||
demos: [
|
||||
standard("Chart legend", "Toggle a series and handle @toggle to update your chart.", {
|
||||
title: "Traffic sources",
|
||||
description: "Select a source to toggle its visibility.",
|
||||
items: [
|
||||
{ label: "Direct", color: "#8b5cf6", value: "42%" },
|
||||
{ label: "Search", color: "#14b8a6", value: "35%" },
|
||||
{ label: "Referral", color: "#f59e0b", value: "23%" },
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
componentProfiles.Chart = {
|
||||
demos: [
|
||||
standard("Bar chart", "Chart.js bars with positive and negative values.", {
|
||||
title: "Sample weekly changes",
|
||||
description: "Sample data",
|
||||
type: "bar",
|
||||
data: [
|
||||
{ label: "Mon", value: 24 },
|
||||
{ label: "Tue", value: -12 },
|
||||
{ label: "Wed", value: 29 },
|
||||
{ label: "Thu", value: 52 },
|
||||
{ label: "Fri", value: 45 },
|
||||
],
|
||||
items: [],
|
||||
showLegend: true,
|
||||
showValues: false,
|
||||
}),
|
||||
...["line", "area", "pie", "doughnut", "radar", "polarArea"].map((type) =>
|
||||
compact(
|
||||
type + " chart",
|
||||
"Rendered by Chart.js with native tooltips and legend interactions.",
|
||||
{
|
||||
title: "Sample " + type,
|
||||
description: "Sample data",
|
||||
type,
|
||||
data: {
|
||||
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
|
||||
datasets: [{ label: "Series A", data: [24, 38, 29, 52, 45] }],
|
||||
},
|
||||
items: [],
|
||||
showLegend: true,
|
||||
showValues: false,
|
||||
},
|
||||
),
|
||||
),
|
||||
advanced("Scatter chart", "Pass native x/y coordinates without flattening them.", {
|
||||
title: "Sample coordinates",
|
||||
description: "Sample data",
|
||||
type: "scatter",
|
||||
items: [],
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: "Observations",
|
||||
data: [
|
||||
{ x: 1, y: 4 },
|
||||
{ x: 3, y: 8 },
|
||||
{ x: 5, y: 3 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
showValues: false,
|
||||
}),
|
||||
advanced("Bubble chart", "Native x/y/r points preserve bubble radii.", {
|
||||
title: "Sample bubbles",
|
||||
description: "Sample data",
|
||||
type: "bubble",
|
||||
items: [],
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: "Observations",
|
||||
data: [
|
||||
{ x: 1, y: 4, r: 8 },
|
||||
{ x: 3, y: 8, r: 16 },
|
||||
{ x: 5, y: 3, r: 12 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
showValues: false,
|
||||
}),
|
||||
advanced("Mixed chart", "Set each dataset's type and pass native Chart.js options.", {
|
||||
title: "Sample mixed chart",
|
||||
description: "Sample data",
|
||||
type: "bar",
|
||||
items: [],
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar"],
|
||||
datasets: [
|
||||
{ type: "bar", label: "Actual", data: [20, 35, 28] },
|
||||
{ type: "line", label: "Target", data: [25, 30, 40] },
|
||||
],
|
||||
},
|
||||
showValues: false,
|
||||
}),
|
||||
advanced("Horizontal stacked bars", "Configure indexAxis and stacked scales through options.", {
|
||||
title: "Sample stacked chart",
|
||||
description: "Sample data",
|
||||
type: "bar",
|
||||
items: [],
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar"],
|
||||
datasets: [
|
||||
{ label: "A", data: [20, 35, 28] },
|
||||
{ label: "B", data: [25, 30, 40] },
|
||||
],
|
||||
},
|
||||
options: { indexAxis: "y", scales: { x: { stacked: true }, y: { stacked: true } } },
|
||||
showValues: false,
|
||||
}),
|
||||
],
|
||||
options: {
|
||||
type: ["bar", "line", "area", "pie", "doughnut", "radar", "polarArea", "scatter", "bubble"],
|
||||
},
|
||||
};
|
||||
componentProfiles.DatePicker = {
|
||||
demos: [
|
||||
standard("Date picker", "An anchored calendar that does not move surrounding content.", {
|
||||
label: "Start date",
|
||||
name: "start-date",
|
||||
type: "date",
|
||||
}),
|
||||
compact("Date and time", "Choose a calendar date and a time in one field.", {
|
||||
label: "Schedule for",
|
||||
name: "schedule",
|
||||
type: "datetime-local",
|
||||
value: "2026-09-20T09:30",
|
||||
}),
|
||||
advanced("Disabled date", "A read-only scheduled date.", {
|
||||
label: "Scheduled date",
|
||||
readonly: true,
|
||||
}),
|
||||
],
|
||||
options: { type: ["date", "datetime-local"] },
|
||||
};
|
||||
componentProfiles.TimePicker = {
|
||||
demos: [
|
||||
standard("Time picker", "Choose an hour and minute in an anchored panel.", {
|
||||
label: "Meeting time",
|
||||
name: "meeting-time",
|
||||
value: "09:30",
|
||||
}),
|
||||
],
|
||||
};
|
||||
componentProfiles.Modal.demos.push(
|
||||
advanced("Custom header and footer", "Supply your own header, body, and footer actions.", {title:"",description:"",cancelLabel:"",confirmLabel:"",triggerLabel:"Open custom dialog"}, {header:'<h2>Invite a teammate</h2>',default:'<p>Give your teammate access to your workspace.</p>',footer:`<button type="button" class="showcase-action" data-modal-close="true">Done</button>`}),
|
||||
compact("Centered content", "Omit the standard header and footer for a fully custom composition.", {showHeader:false,showFooter:false,title:"",description:"",icon:"",size:"sm",triggerLabel:"Open centered dialog"}, {default:`<div style="text-align:center;padding:2rem"><h2>You are all set</h2><p>Your preferences have been saved.</p><button type="button" class="showcase-action" data-modal-close="true">Continue</button></div>`}),
|
||||
advanced(
|
||||
"Custom header and footer",
|
||||
"Supply your own header, body, and footer actions.",
|
||||
{
|
||||
title: "",
|
||||
description: "",
|
||||
cancelLabel: "",
|
||||
confirmLabel: "",
|
||||
triggerLabel: "Open custom dialog",
|
||||
},
|
||||
{
|
||||
header: "<h2>Invite a teammate</h2>",
|
||||
default: "<p>Give your teammate access to your workspace.</p>",
|
||||
footer: `<button type="button" class="showcase-action" data-modal-close="true">Done</button>`,
|
||||
},
|
||||
),
|
||||
compact(
|
||||
"Centered content",
|
||||
"Omit the standard header and footer for a fully custom composition.",
|
||||
{
|
||||
showHeader: false,
|
||||
showFooter: false,
|
||||
title: "",
|
||||
description: "",
|
||||
icon: "",
|
||||
size: "sm",
|
||||
triggerLabel: "Open centered dialog",
|
||||
},
|
||||
{
|
||||
default: `<div style="text-align:center;padding:2rem"><h2>You are all set</h2><p>Your preferences have been saved.</p><button type="button" class="showcase-action" data-modal-close="true">Continue</button></div>`,
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
export function profileFor(name) {
|
||||
@@ -2992,8 +3247,59 @@ export function eventDescriptionFor(_componentName, eventName) {
|
||||
);
|
||||
}
|
||||
|
||||
componentProfiles.Card.demos.push(advanced("Custom slots", "Supply arbitrary header, body, and footer content. Use showHeader and showFooter to hide either region.", {title:"",description:"",showHeader:true,showFooter:true,footer:"",actionLabel:""}, {header:"<strong>Team invitation</strong>",default:'<Input label="Email" placeholder="name@company.com" />',footer:'<Button label="Send invitation" />'}));
|
||||
componentProfiles.RangeSlider = { demos: [compact("Fractional steps", "Use step=0.2 for precise increments with buttons, dragging, or arrow keys.", {label:"Scale",min:0,max:5,value:2.4,step:0.2})] };
|
||||
componentProfiles.Card.demos.push(
|
||||
advanced(
|
||||
"Custom slots",
|
||||
"Supply arbitrary header, body, and footer content. Use showHeader and showFooter to hide either region.",
|
||||
{ title: "", description: "", showHeader: true, showFooter: true, footer: "", actionLabel: "" },
|
||||
{
|
||||
header: "<strong>Team invitation</strong>",
|
||||
default: '<Input label="Email" placeholder="name@company.com" />',
|
||||
footer: '<Button label="Send invitation" />',
|
||||
},
|
||||
),
|
||||
);
|
||||
componentProfiles.RangeSlider = {
|
||||
demos: [
|
||||
compact(
|
||||
"Fractional steps",
|
||||
"Use step=0.2 for precise increments with buttons, dragging, or arrow keys.",
|
||||
{ label: "Scale", min: 0, max: 5, value: 2.4, step: 0.2 },
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
componentProfiles.FileInput = {demos:[standard("Choose a document", "Select a PDF or image. The selected filename replaces the placeholder.", {label:"Attachment",name:"attachment",value:"",accept:".pdf,image/*",helperText:"PDF or image",placeholder:"Choose a file"}),compact("Multiple attachments", "Select several files; each filename is shown in the control.",{label:"Attachments",name:"attachments",value:"",multiple:true,placeholder:"Choose files"}),advanced("Disabled upload", "A disabled control cannot open the file chooser.",{label:"Attachment",name:"disabled-file",value:"",disabled:true,placeholder:"Uploads unavailable"})]};
|
||||
componentProfiles.FileInput = {
|
||||
demos: [
|
||||
standard(
|
||||
"Choose a document",
|
||||
"Select a PDF or image. The selected filename replaces the placeholder.",
|
||||
{
|
||||
label: "Attachment",
|
||||
name: "attachment",
|
||||
value: "",
|
||||
accept: ".pdf,image/*",
|
||||
helperText: "PDF or image",
|
||||
placeholder: "Choose a file",
|
||||
},
|
||||
),
|
||||
compact(
|
||||
"Multiple attachments",
|
||||
"Select several files; each filename is shown in the control.",
|
||||
{
|
||||
label: "Attachments",
|
||||
name: "attachments",
|
||||
value: "",
|
||||
multiple: true,
|
||||
placeholder: "Choose files",
|
||||
},
|
||||
),
|
||||
advanced("Disabled upload", "A disabled control cannot open the file chooser.", {
|
||||
label: "Attachment",
|
||||
name: "disabled-file",
|
||||
value: "",
|
||||
disabled: true,
|
||||
placeholder: "Uploads unavailable",
|
||||
}),
|
||||
],
|
||||
};
|
||||
@@ -73,9 +73,9 @@
|
||||
"path": "/blocks/stats-bar"
|
||||
}
|
||||
],
|
||||
"componentCount": 84,
|
||||
"componentCount": 86,
|
||||
"categoryCount": 11,
|
||||
"totalDemoCount": 346,
|
||||
"totalDemoCount": 361,
|
||||
"components": [
|
||||
{
|
||||
"name": "Accordion",
|
||||
@@ -250,8 +250,8 @@
|
||||
"slug": "chart",
|
||||
"category": "integrations",
|
||||
"purpose": "Theme-aware, responsive chart component.",
|
||||
"demoCount": 2,
|
||||
"propCount": 14,
|
||||
"demoCount": 11,
|
||||
"propCount": 17,
|
||||
"slots": ["default"],
|
||||
"events": ["select", "dataPointClick", "legendToggle"],
|
||||
"profiled": true
|
||||
@@ -481,6 +481,18 @@
|
||||
"events": ["open", "close", "cancel"],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "DrawflowCanvas",
|
||||
"mount": "DrawflowCanvas",
|
||||
"slug": "drawflow-canvas",
|
||||
"category": "core",
|
||||
"purpose": "Reusable drawflow canvas component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 3,
|
||||
"slots": [],
|
||||
"events": ["select", "connect", "move", "add"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "Dropdown",
|
||||
"mount": "Dropdown",
|
||||
@@ -517,6 +529,18 @@
|
||||
"events": ["cancel", "retry", "complete"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "FlowCanvas",
|
||||
"mount": "FlowCanvas",
|
||||
"slug": "flow-canvas",
|
||||
"category": "core",
|
||||
"purpose": "Reusable flow canvas component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 9,
|
||||
"slots": [],
|
||||
"events": ["select", "connect", "move", "add"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "Grid",
|
||||
"mount": "Grid",
|
||||
|
||||
@@ -31,9 +31,12 @@ test("preview input never requests a replacement; settings still do", async () =
|
||||
test("stored theme updates its stylesheet before the theme runtime loads", async () => {
|
||||
const window = new Window({ url: "http://localhost/components/alert" });
|
||||
window.document.cookie = "wrn-ui-mode=light;path=/";
|
||||
window.document.head.innerHTML = '<link rel="stylesheet" data-wrnexus-theme href="/__wrnexus/theme/dark/violet.css">';
|
||||
window.document.head.innerHTML =
|
||||
'<link rel="stylesheet" data-wrnexus-theme href="/__wrnexus/theme/dark/violet.css">';
|
||||
window.eval(readFileSync(new URL("../public/playground.js", import.meta.url), "utf8"));
|
||||
expect(window.document.documentElement.dataset.theme).toBe("light");
|
||||
expect(window.document.querySelector("link")?.getAttribute("href")).toBe("/__wrnexus/theme/light/violet.css");
|
||||
expect(window.document.querySelector("link")?.getAttribute("href")).toBe(
|
||||
"/__wrnexus/theme/light/violet.css",
|
||||
);
|
||||
await window.happyDOM.close();
|
||||
});
|
||||
Loaded 100 of 693 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user