feat: sync WRNexusJS component showcase 0.5.0
This commit is contained in:
Clintchiz committed
1 parent
72552f2381
commit
8ba1f67f98
104 files changed
+10169
-7824
No files matched your search
@@ -30,35 +30,35 @@ layout Showcase {
|
|||||||
|
|
||||||
<section class="docs-directory-group">
|
<section class="docs-directory-group">
|
||||||
<a class="docs-directory-heading" href="/advanced-forms">Advanced Forms</a>
|
<a class="docs-directory-heading" href="/advanced-forms">Advanced Forms</a>
|
||||||
<div><a data-docs-component-link href="/components/advanced-select">Advanced Select</a><a data-docs-component-link href="/components/combo-box">Combo Box</a><a data-docs-component-link href="/components/copy-markup">Copy Markup</a><a data-docs-component-link href="/components/input-number">Input Number</a><a data-docs-component-link href="/components/pin-input">Pin Input</a><a data-docs-component-link href="/components/search-box">Search Box</a><a data-docs-component-link href="/components/strong-password">Strong Password</a><a data-docs-component-link href="/components/toggle-count">Toggle Count</a><a data-docs-component-link href="/components/toggle-password">Toggle Password</a></div>
|
<div><a data-docs-component-link href="/components/advanced-select"><span data-docs-component-name>Advanced Select</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/combo-box"><span data-docs-component-name>Combo Box</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/copy-markup"><span data-docs-component-name>Copy Markup</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/input-number"><span data-docs-component-name>Input Number</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/pin-input"><span data-docs-component-name>Pin Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/search-box"><span data-docs-component-name>Search Box</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/strong-password"><span data-docs-component-name>Strong Password</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/toggle-count"><span data-docs-component-name>Toggle Count</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/toggle-password"><span data-docs-component-name>Toggle Password</span><small data-component-status="complete">Complete</small></a></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="docs-directory-group">
|
<section class="docs-directory-group">
|
||||||
<a class="docs-directory-heading" href="/base">Base</a>
|
<a class="docs-directory-heading" href="/base">Base</a>
|
||||||
<div><a data-docs-component-link href="/components/accordion">Accordion</a><a data-docs-component-link href="/components/alert">Alert</a><a data-docs-component-link href="/components/avatar">Avatar</a><a data-docs-component-link href="/components/avatar-group">Avatar Group</a><a data-docs-component-link href="/components/badge">Badge</a><a data-docs-component-link href="/components/blockquote">Blockquote</a><a data-docs-component-link href="/components/button">Button</a><a data-docs-component-link href="/components/button-group">Button Group</a><a data-docs-component-link href="/components/card">Card</a><a data-docs-component-link href="/components/carousel">Carousel</a><a data-docs-component-link href="/components/chat-bubble">Chat Bubble</a><a data-docs-component-link href="/components/collapse">Collapse</a><a data-docs-component-link href="/components/date-picker">Date Picker</a><a data-docs-component-link href="/components/device-frame">Device Frame</a><a data-docs-component-link href="/components/file-upload-progress">File Upload Progress</a><a data-docs-component-link href="/components/legend-indicator">Legend Indicator</a><a data-docs-component-link href="/components/list">List</a><a data-docs-component-link href="/components/list-group">List Group</a><a data-docs-component-link href="/components/marquee">Marquee</a><a data-docs-component-link href="/components/progress">Progress</a><a data-docs-component-link href="/components/rating">Rating</a><a data-docs-component-link href="/components/skeleton">Skeleton</a><a data-docs-component-link href="/components/spinner">Spinner</a><a data-docs-component-link href="/components/styled-icon">Styled Icon</a><a data-docs-component-link href="/components/timeline">Timeline</a><a data-docs-component-link href="/components/toast">Toast</a><a data-docs-component-link href="/components/tree-view">Tree View</a></div>
|
<div><a data-docs-component-link href="/components/accordion"><span data-docs-component-name>Accordion</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/alert"><span data-docs-component-name>Alert</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar"><span data-docs-component-name>Avatar</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar-group"><span data-docs-component-name>Avatar Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/badge"><span data-docs-component-name>Badge</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/blockquote"><span data-docs-component-name>Blockquote</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button"><span data-docs-component-name>Button</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button-group"><span data-docs-component-name>Button Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/card"><span data-docs-component-name>Card</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/carousel"><span data-docs-component-name>Carousel</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/chat-bubble"><span data-docs-component-name>Chat Bubble</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/collapse"><span data-docs-component-name>Collapse</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/date-picker"><span data-docs-component-name>Date Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/device-frame"><span data-docs-component-name>Device Frame</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-upload-progress"><span data-docs-component-name>File Upload Progress</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/legend-indicator"><span data-docs-component-name>Legend Indicator</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list"><span data-docs-component-name>List</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list-group"><span data-docs-component-name>List Group</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/marquee"><span data-docs-component-name>Marquee</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/progress"><span data-docs-component-name>Progress</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/rating"><span data-docs-component-name>Rating</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/skeleton"><span data-docs-component-name>Skeleton</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/spinner"><span data-docs-component-name>Spinner</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/styled-icon"><span data-docs-component-name>Styled Icon</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/timeline"><span data-docs-component-name>Timeline</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/toast"><span data-docs-component-name>Toast</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tree-view"><span data-docs-component-name>Tree View</span><small data-component-status="pending">Pending</small></a></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="docs-directory-group">
|
<section class="docs-directory-group">
|
||||||
<a class="docs-directory-heading" href="/forms">Forms</a>
|
<a class="docs-directory-heading" href="/forms">Forms</a>
|
||||||
<div><a data-docs-component-link href="/components/checkbox">Checkbox</a><a data-docs-component-link href="/components/color-picker">Color Picker</a><a data-docs-component-link href="/components/file-input">File Input</a><a data-docs-component-link href="/components/input">Input</a><a data-docs-component-link href="/components/input-group">Input Group</a><a data-docs-component-link href="/components/radio">Radio</a><a data-docs-component-link href="/components/range-slider">Range Slider</a><a data-docs-component-link href="/components/select">Select</a><a data-docs-component-link href="/components/switch">Switch</a><a data-docs-component-link href="/components/textarea">Textarea</a><a data-docs-component-link href="/components/time-picker">Time Picker</a></div>
|
<div><a data-docs-component-link href="/components/checkbox"><span data-docs-component-name>Checkbox</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/color-picker"><span data-docs-component-name>Color Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-input"><span data-docs-component-name>File Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input"><span data-docs-component-name>Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input-group"><span data-docs-component-name>Input Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/radio"><span data-docs-component-name>Radio</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/range-slider"><span data-docs-component-name>Range Slider</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/select"><span data-docs-component-name>Select</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/switch"><span data-docs-component-name>Switch</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/textarea"><span data-docs-component-name>Textarea</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/time-picker"><span data-docs-component-name>Time Picker</span><small data-component-status="complete">Complete</small></a></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="docs-directory-group">
|
<section class="docs-directory-group">
|
||||||
<a class="docs-directory-heading" href="/integrations">Integrations</a>
|
<a class="docs-directory-heading" href="/integrations">Integrations</a>
|
||||||
<div><a data-docs-component-link href="/components/advanced-date-picker">Advanced Date Picker</a><a data-docs-component-link href="/components/advanced-range-slider">Advanced Range Slider</a><a data-docs-component-link href="/components/chart">Chart</a><a data-docs-component-link href="/components/clipboard">Clipboard</a><a data-docs-component-link href="/components/confetti">Confetti</a><a data-docs-component-link href="/components/data-map">Data Map</a><a data-docs-component-link href="/components/data-table">Data Table</a><a data-docs-component-link href="/components/drag-and-drop">Drag And Drop</a><a data-docs-component-link href="/components/file-upload">File Upload</a><a data-docs-component-link href="/components/map">Map</a><a data-docs-component-link href="/components/toast-notifications">Toast Notifications</a><a data-docs-component-link href="/components/wysiwyg-editor">Wysiwyg Editor</a></div>
|
<div><a data-docs-component-link href="/components/advanced-date-picker"><span data-docs-component-name>Advanced Date Picker</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/advanced-range-slider"><span data-docs-component-name>Advanced Range Slider</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/chart"><span data-docs-component-name>Chart</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/clipboard"><span data-docs-component-name>Clipboard</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/confetti"><span data-docs-component-name>Confetti</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/data-map"><span data-docs-component-name>Data Map</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/data-table"><span data-docs-component-name>Data Table</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/drag-and-drop"><span data-docs-component-name>Drag And Drop</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/file-upload"><span data-docs-component-name>File Upload</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/map"><span data-docs-component-name>Map</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/toast-notifications"><span data-docs-component-name>Toast Notifications</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/wysiwyg-editor"><span data-docs-component-name>Wysiwyg Editor</span><small data-component-status="pending">Pending</small></a></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="docs-directory-group">
|
<section class="docs-directory-group">
|
||||||
<a class="docs-directory-heading" href="/layout">Layout</a>
|
<a class="docs-directory-heading" href="/layout">Layout</a>
|
||||||
<div><a data-docs-component-link href="/components/columns">Columns</a><a data-docs-component-link href="/components/container">Container</a><a data-docs-component-link href="/components/custom-scrollbar">Custom Scrollbar</a><a data-docs-component-link href="/components/divider">Divider</a><a data-docs-component-link href="/components/grid">Grid</a><a data-docs-component-link href="/components/image">Image</a><a data-docs-component-link href="/components/kbd">Kbd</a><a data-docs-component-link href="/components/layout-splitter">Layout Splitter</a><a data-docs-component-link href="/components/link">Link</a><a data-docs-component-link href="/components/typography">Typography</a></div>
|
<div><a data-docs-component-link href="/components/columns"><span data-docs-component-name>Columns</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/container"><span data-docs-component-name>Container</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/custom-scrollbar"><span data-docs-component-name>Custom Scrollbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/divider"><span data-docs-component-name>Divider</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/grid"><span data-docs-component-name>Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/image"><span data-docs-component-name>Image</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/kbd"><span data-docs-component-name>Kbd</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/layout-splitter"><span data-docs-component-name>Layout Splitter</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/link"><span data-docs-component-name>Link</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/typography"><span data-docs-component-name>Typography</span><small data-component-status="pending">Pending</small></a></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="docs-directory-group">
|
<section class="docs-directory-group">
|
||||||
<a class="docs-directory-heading" href="/navigation">Navigation</a>
|
<a class="docs-directory-heading" href="/navigation">Navigation</a>
|
||||||
<div><a data-docs-component-link href="/components/breadcrumb">Breadcrumb</a><a data-docs-component-link href="/components/mega-menu">Mega Menu</a><a data-docs-component-link href="/components/nav">Nav</a><a data-docs-component-link href="/components/navbar">Navbar</a><a data-docs-component-link href="/components/pagination">Pagination</a><a data-docs-component-link href="/components/scrollspy">Scrollspy</a><a data-docs-component-link href="/components/sidebar">Sidebar</a><a data-docs-component-link href="/components/stepper">Stepper</a><a data-docs-component-link href="/components/tabs">Tabs</a></div>
|
<div><a data-docs-component-link href="/components/breadcrumb"><span data-docs-component-name>Breadcrumb</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/mega-menu"><span data-docs-component-name>Mega Menu</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/nav"><span data-docs-component-name>Nav</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/navbar"><span data-docs-component-name>Navbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/pagination"><span data-docs-component-name>Pagination</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/scrollspy"><span data-docs-component-name>Scrollspy</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/sidebar"><span data-docs-component-name>Sidebar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/stepper"><span data-docs-component-name>Stepper</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tabs"><span data-docs-component-name>Tabs</span><small data-component-status="pending">Pending</small></a></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="docs-directory-group">
|
<section class="docs-directory-group">
|
||||||
<a class="docs-directory-heading" href="/overlays">Overlays</a>
|
<a class="docs-directory-heading" href="/overlays">Overlays</a>
|
||||||
<div><a data-docs-component-link href="/components/context-menu">Context Menu</a><a data-docs-component-link href="/components/drawer">Drawer</a><a data-docs-component-link href="/components/dropdown">Dropdown</a><a data-docs-component-link href="/components/modal">Modal</a><a data-docs-component-link href="/components/popover">Popover</a><a data-docs-component-link href="/components/tooltip">Tooltip</a></div>
|
<div><a data-docs-component-link href="/components/context-menu"><span data-docs-component-name>Context Menu</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/drawer"><span data-docs-component-name>Drawer</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/dropdown"><span data-docs-component-name>Dropdown</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/modal"><span data-docs-component-name>Modal</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/popover"><span data-docs-component-name>Popover</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tooltip"><span data-docs-component-name>Tooltip</span><small data-component-status="pending">Pending</small></a></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="docs-directory-group">
|
<section class="docs-directory-group">
|
||||||
<a class="docs-directory-heading" href="/tables">Tables</a>
|
<a class="docs-directory-heading" href="/tables">Tables</a>
|
||||||
<div><a data-docs-component-link href="/components/table">Table</a></div>
|
<div><a data-docs-component-link href="/components/table"><span data-docs-component-name>Table</span><small data-component-status="pending">Pending</small></a></div>
|
||||||
</section>
|
</section>
|
||||||
</nav>
|
</nav>
|
||||||
<p class="docs-directory-empty" data-docs-empty>No components found.</p>
|
<p class="docs-directory-empty" data-docs-empty>No components found.</p>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ page AdvancedFormsShowcase {
|
|||||||
<span class="showcase-eyebrow">Component category</span>
|
<span class="showcase-eyebrow">Component category</span>
|
||||||
<h1 class="showcase-title">Advanced Forms</h1>
|
<h1 class="showcase-title">Advanced Forms</h1>
|
||||||
<p class="showcase-description">9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
<p class="showcase-description">9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||||
<div class="category-meta"><span>9 components</span><span>Multiple use cases</span><span>106 live configurations</span></div>
|
<div class="category-meta"><span>9 components</span><span>Multiple use cases</span><span>116 live configurations</span></div>
|
||||||
</header>
|
</header>
|
||||||
<div class="catalog-grid">
|
<div class="catalog-grid">
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
@@ -46,11 +46,11 @@ page AdvancedFormsShowcase {
|
|||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="InputNumber" size="default" label="Input Number" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="InputNumber" size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Advanced Forms</span><h2>Input Number</h2><p>Theme-aware, responsive input number component.</p></div>
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Input Number</h2><p>Theme-aware, responsive input number component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/input-number">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>40 props · 0 slots</span><a href="/components/input-number">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
@@ -86,11 +86,11 @@ page AdvancedFormsShowcase {
|
|||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="ToggleCount" size="default" label="Toggle Count" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="ToggleCount" size="default" color="primary" variant="segmented" name="pricing-cycle" value="annual" items="[{"label":"Startup","monthly":19,"annual":190},{"label":"Team","monthly":89,"annual":890},{"label":"Enterprise","monthly":129,"annual":1290}]" align="end"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Count</h2><p>Theme-aware, responsive toggle count component.</p></div>
|
<div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Count</h2><p>Theme-aware, responsive toggle count component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/toggle-count">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/toggle-count">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
|
|||||||
+29
-29
@@ -10,67 +10,67 @@ page BaseShowcase {
|
|||||||
<span class="showcase-eyebrow">Component category</span>
|
<span class="showcase-eyebrow">Component category</span>
|
||||||
<h1 class="showcase-title">Base</h1>
|
<h1 class="showcase-title">Base</h1>
|
||||||
<p class="showcase-description">27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
<p class="showcase-description">27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||||
<div class="category-meta"><span>27 components</span><span>Multiple use cases</span><span>86 live configurations</span></div>
|
<div class="category-meta"><span>27 components</span><span>Multiple use cases</span><span>169 live configurations</span></div>
|
||||||
</header>
|
</header>
|
||||||
<div class="catalog-grid">
|
<div class="catalog-grid">
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Accordion" size="default" items="[{"id":"accordion-0-1","key":"accordion-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"accordion-0-2","key":"accordion-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#accordion-demo","actionHref":"#accordion-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" multiple="false" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
|
<div class="catalog-card-stage"><div data-component="Accordion" size="default" color="primary" id="accordion-example-1" items="[{"value":"first","label":"Accordion #1","content":"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."},{"value":"second","label":"Accordion #2","content":"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."},{"value":"third","label":"Accordion #3","content":"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."}]" defaultOpen="["first"]" contentItalic="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>5 props · 1 slots</span><a href="/components/accordion">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>17 props · 0 slots</span><a href="/components/accordion">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Alert" size="default" title="Alert example" description="A polished default alert for a modern application." items="[{"id":"alert-0-1","key":"alert-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"alert-0-2","key":"alert-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#alert-demo","actionHref":"#alert-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Alert" color="dark" variant="solid" radius="lg" shadow="sm" title="Dark alert!" description="You should check in on some of those fields below." items="[]" actions="[]" showIcon="false" dismissible="false" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/alert">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>21 props · 0 slots</span><a href="/components/alert">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Avatar" size="default" title="Avatar example" description="A polished default avatar for a modern application." items="[{"id":"avatar-0-1","key":"avatar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-0-2","key":"avatar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xs" color="primary" variant="solid" shape="circle"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/avatar">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>18 props · 0 slots</span><a href="/components/avatar">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="AvatarGroup" size="default" title="Avatar Group example" description="A polished default avatar group for a modern application." items="[{"id":"avatar-group-0-1","key":"avatar-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-0-2","key":"avatar-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="AvatarGroup" items="[{"src":"/avatar-example.svg","name":"Mark Wanner","alt":"Mark Wanner"},{"src":"/avatar-example-2.svg","name":"Maria Guan","alt":"Maria Guan"},{"src":"/avatar-example-3.svg","name":"Amil Evara","alt":"Amil Evara"},{"initials":"EE","name":"Ebele Egbuna","color":"info"}]" size="lg" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Avatar Group</h2><p>Theme-aware, responsive avatar group component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Avatar Group</h2><p>Theme-aware, responsive avatar group component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/avatar-group">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>12 props · 0 slots</span><a href="/components/avatar-group">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Badge" size="default" title="Badge example" description="A polished default badge for a modern application." items="[{"id":"badge-0-1","key":"badge-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":"#badge-demo","actionHref":"#badge-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":"badge-0-2","key":"badge-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#badge-demo","actionHref":"#badge-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Badge" label="Active" size="md" color="success" variant="solid" shape="pill"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>22 props · 0 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Blockquote" size="default" title="Blockquote example" description="A polished default blockquote for a modern application." items="[{"id":"blockquote-0-1","key":"blockquote-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":"#blockquote-demo","actionHref":"#blockquote-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":"blockquote-0-2","key":"blockquote-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#blockquote-demo","actionHref":"#blockquote-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Blockquote" quote="I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed." size="md" color="primary" align="left" variant="default" quoteMark="true" italic="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
@@ -86,81 +86,81 @@ page BaseShowcase {
|
|||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="ButtonGroup" size="default" title="Button Group example" description="A polished default button group for a modern application." items="[{"id":"button-group-0-1","key":"button-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-0-2","key":"button-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="ButtonGroup" items="[{"label":"Profile","value":"profile"},{"label":"Settings","value":"settings"},{"label":"Messages","value":"messages"}]" value="profile" size="md" color="primary" variant="outline" orientation="horizontal" attached="true" selectable="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Button Group</h2><p>Theme-aware, responsive button group component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Button Group</h2><p>Theme-aware, responsive button group component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/button-group">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/button-group">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Card" size="default" title="Card example" description="A polished default card for a modern application." items="[{"id":"card-0-1","key":"card-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"card-0-2","key":"card-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="Go somewhere" actionHref="#card-demo" size="md" color="primary"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>31 props · 1 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Carousel" size="default" title="Carousel example" description="A polished default carousel for a modern application." items="[{"id":"carousel-0-1","key":"carousel-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"carousel-0-2","key":"carousel-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Carousel" size="default" color="primary" title="" description="" items="[{"label":"First slide","title":"First slide","description":"Introduce the collection with a concise, focused message."},{"label":"Second slide","title":"Second slide","description":"Move through content using buttons, pagination, keyboard, or touch."},{"label":"Third slide","title":"Third slide","description":"Every interaction exposes useful public lifecycle and navigation events."},{"label":"Fourth slide","title":"Fourth slide","description":"Flexible for larger collections."},{"label":"Fifth slide","title":"Fifth slide","description":"Responsive at every viewport."},{"label":"Sixth slide","title":"Sixth slide","description":"Built with accessible semantics."}]" ariaLabel="Basic usage"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>22 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="ChatBubble" size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items="[{"id":"chat-bubble-0-1","key":"chat-bubble-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{"id":"question","direction":"incoming","author":"Support agent","title":"How can we help?","text":"You can ask questions like:","bullets":["What's WireJS UI?","How many component examples are there?","Is there a PRO version?"]},{"id":"request","direction":"outgoing","author":"AZ","text":"what's wirejs ui?"},{"id":"answer","direction":"incoming","author":"Support agent","text":"WireJS UI is an open-source set of reusable UI components built for responsive applications.","links":[{"label":"Installation guide","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]}]" oneSided="false" showAvatars="false" showMetadata="false" ariaLabel="Conversation"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/chat-bubble">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/chat-bubble">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="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" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Collapse" size="default" color="primary" items="[{"id":"collapse-default-panel","label":"Collapse","closeLabel":"Collapse","content":"This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."}]" multiple="false" mode="panel" initialOpenIndexes="[]" ariaLabel="Default collapse"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>5 props · 1 slots</span><a href="/components/collapse">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/collapse">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="DatePicker" size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="DatePicker" size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Date Picker</h2><p>Theme-aware, responsive date picker component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Date Picker</h2><p>Theme-aware, responsive date picker component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/date-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>25 props · 0 slots</span><a href="/components/date-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="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" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="DeviceFrame" size="default" title="Device Frame example" description="A polished default device frame for a modern application." items="[{"id":"device-frame-0-1","key":"device-frame-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"device-frame-0-2","key":"device-frame-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>Device Frame</h2><p>Theme-aware, responsive device frame component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>Device Frame</h2><p>Theme-aware, responsive device frame component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/device-frame">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>14 props · 1 slots</span><a href="/components/device-frame">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="FileUploadProgress" size="default" label="File Upload Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="FileUploadProgress" size="default" label="Uploading archive" value="42" max="100" showValue="true" fileName="design-system.zip" fileSize="20 MB" uploadedSize="8.4 MB" status="uploading" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Base</span><h2>File Upload Progress</h2><p>Theme-aware, responsive file upload progress component.</p></div>
|
<div><span class="catalog-card-category">Base</span><h2>File Upload Progress</h2><p>Theme-aware, responsive file upload progress component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>7 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
|
|||||||
+378
-536
File diff suppressed because it is too large.
Load diff
@@ -21,7 +21,7 @@ page AdvancedDatePickerDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Advanced Date Picker</h1>
|
<h1>Advanced Date Picker</h1>
|
||||||
<p>Theme-aware, responsive advanced date picker component.</p>
|
<p>Theme-aware, responsive advanced date picker component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page AdvancedDatePickerDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-advanced-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-advanced-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-advanced-date-picker-title"><span><strong>title</strong><small>string</small></span><input id="playground-advanced-date-picker-title" name="pg_title" type="text" value="Advanced Date Picker example" /></label><label class="playground-field" for="playground-advanced-date-picker-description"><span><strong>description</strong><small>string</small></span><input id="playground-advanced-date-picker-description" name="pg_description" type="text" value="A polished default advanced date picker for a modern application." /></label><label class="playground-field" for="playground-advanced-date-picker-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-advanced-date-picker-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-advanced-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-advanced-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-advanced-date-picker-title"><span><strong>title</strong><small>string</small></span><input id="playground-advanced-date-picker-title" name="pg_title" type="text" value="Advanced Date Picker example" /></label><label class="playground-field" for="playground-advanced-date-picker-description"><span><strong>description</strong><small>string</small></span><input id="playground-advanced-date-picker-description" name="pg_description" type="text" value="A polished default advanced date picker for a modern application." /></label><label class="playground-field" for="playground-advanced-date-picker-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-advanced-date-picker-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "advanced-date-picker-0-1",
|
"id": "advanced-date-picker-0-1",
|
||||||
"key": "advanced-date-picker-0-1",
|
"key": "advanced-date-picker-0-1",
|
||||||
@@ -649,11 +649,15 @@ page AdvancedDatePickerDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="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>"Advanced Date Picker"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Advanced Date Picker"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#advanced-date-picker-demo-1">Production default</a><a href="#advanced-date-picker-demo-2">Compact application</a><a href="#advanced-date-picker-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#advanced-date-picker-demo-1">Production default</a><a href="#advanced-date-picker-demo-2">Compact application</a><a href="#advanced-date-picker-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page AdvancedRangeSliderDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Advanced Range Slider</h1>
|
<h1>Advanced Range Slider</h1>
|
||||||
<p>Theme-aware, responsive advanced range slider component.</p>
|
<p>Theme-aware, responsive advanced range slider component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page AdvancedRangeSliderDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-advanced-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-advanced-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-advanced-range-slider-title"><span><strong>title</strong><small>string</small></span><input id="playground-advanced-range-slider-title" name="pg_title" type="text" value="Advanced Range Slider example" /></label><label class="playground-field" for="playground-advanced-range-slider-description"><span><strong>description</strong><small>string</small></span><input id="playground-advanced-range-slider-description" name="pg_description" type="text" value="A polished default advanced range slider for a modern application." /></label><label class="playground-field" for="playground-advanced-range-slider-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-advanced-range-slider-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-advanced-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-advanced-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-advanced-range-slider-title"><span><strong>title</strong><small>string</small></span><input id="playground-advanced-range-slider-title" name="pg_title" type="text" value="Advanced Range Slider example" /></label><label class="playground-field" for="playground-advanced-range-slider-description"><span><strong>description</strong><small>string</small></span><input id="playground-advanced-range-slider-description" name="pg_description" type="text" value="A polished default advanced range slider for a modern application." /></label><label class="playground-field" for="playground-advanced-range-slider-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-advanced-range-slider-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "advanced-range-slider-0-1",
|
"id": "advanced-range-slider-0-1",
|
||||||
"key": "advanced-range-slider-0-1",
|
"key": "advanced-range-slider-0-1",
|
||||||
@@ -649,11 +649,15 @@ page AdvancedRangeSliderDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@end</code><span>Fires when the component emits the end event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Advanced Range Slider"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Advanced Range Slider"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#advanced-range-slider-demo-1">Production default</a><a href="#advanced-range-slider-demo-2">Compact application</a><a href="#advanced-range-slider-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#advanced-range-slider-demo-1">Production default</a><a href="#advanced-range-slider-demo-2">Compact application</a><a href="#advanced-range-slider-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -123,7 +123,7 @@ page AdvancedSelectDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>51 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>51 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-advanced-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-select-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-advanced-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-select-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-advanced-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-advanced-select-label" name="pg_label" type="text" value="Default advanced select" /></label><label class="playground-field" for="playground-advanced-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-advanced-select-name" name="pg_name" type="text" value="advanced-select-1" /></label><label class="playground-field" for="playground-advanced-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-advanced-select-value" name="pg_value" type="text" value="design" /></label><label class="playground-field" for="playground-advanced-select-values"><span><strong>values</strong><small>string</small></span><textarea id="playground-advanced-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-advanced-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-advanced-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-select-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-advanced-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-select-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-advanced-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-advanced-select-label" name="pg_label" type="text" value="Default advanced select" /></label><label class="playground-field" for="playground-advanced-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-advanced-select-name" name="pg_name" type="text" value="advanced-select-1" /></label><label class="playground-field" for="playground-advanced-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-advanced-select-value" name="pg_value" type="text" value="design" /></label><label class="playground-field" for="playground-advanced-select-values"><span><strong>values</strong><small>string</small></span><textarea id="playground-advanced-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-advanced-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"value": "design",
|
"value": "design",
|
||||||
"label": "Design",
|
"label": "Design",
|
||||||
@@ -2580,14 +2580,9 @@ page AdvancedSelectDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every interaction</h2><p>Events are declared with <code>@event</code>, bubble from the component root, and expose their state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires whenever the autocomplete query changes.</span></div><div><code>@select</code><span>Fires after an option is selected by pointer or keyboard.</span></div><div><code>@change</code><span>Fires when the selected value changes or is cleared.</span></div><div><code>@clear</code><span>Fires after the current selection is cleared.</span></div><div><code>@open</code><span>Fires when the suggestion dropdown opens.</span></div><div><code>@close</code><span>Fires when the suggestion dropdown closes.</span></div><div><code>@load</code><span>Fires after a remote request succeeds.</span></div><div><code>@error</code><span>Fires when a remote request fails.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-wrn-select]")
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the search query changes or is submitted.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
component.addEventListener("select", (event) => {
|
component.addEventListener('search', (event) => {
|
||||||
console.log(event.detail.value)
|
|
||||||
console.log(event.detail.complete)
|
|
||||||
})
|
|
||||||
|
|
||||||
component.addEventListener("load", (event) => {
|
|
||||||
console.log(event.detail)
|
console.log(event.detail)
|
||||||
})</code></pre></section></div></section>
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Advanced Select"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>values</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Select an option"</code></td><td>No</td></tr><tr><td><code>placeholderIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Search options…"</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>searchable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowEmpty</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>tags</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading options…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No options found"</code></td><td>No</td></tr><tr><td><code>selectedOptionsLabel</code></td><td>string</td><td><code>"Selected options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear selection"</code></td><td>No</td></tr><tr><td><code>createLabel</code></td><td>string</td><td><code>"Create"</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>maxSelections</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>counterTemplate</code></td><td>string</td><td><code>"{selected} selected"</code></td><td>No</td></tr><tr><td><code>optionTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>selectedTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollToSelected</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fixed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>remoteUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>remoteQueryParam</code></td><td>string</td><td><code>"q"</code></td><td>No</td></tr><tr><td><code>remoteDebounce</code></td><td>number</td><td><code>250</code></td><td>No</td></tr><tr><td><code>remoteAutoLoad</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>infinite</code></td><td>boolean<Line truncated
|
<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>"Advanced Select"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>values</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Select an option"</code></td><td>No</td></tr><tr><td><code>placeholderIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Search options…"</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>searchable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowEmpty</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>tags</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading options…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No options found"</code></td><td>No</td></tr><tr><td><code>selectedOptionsLabel</code></td><td>string</td><td><code>"Selected options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear selection"</code></td><td>No</td></tr><tr><td><code>createLabel</code></td><td>string</td><td><code>"Create"</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>maxSelections</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>counterTemplate</code></td><td>string</td><td><code>"{selected} selected"</code></td><td>No</td></tr><tr><td><code>optionTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>selectedTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>scrollToSelected</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fixed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>remoteUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>remoteQueryParam</code></td><td>string</td><td><code>"q"</code></td><td>No</td></tr><tr><td><code>remoteDebounce</code></td><td>number</td><td><code>250</code></td><td>No</td></tr><tr><td><code>remoteAutoLoad</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>infinite</code></td><td>boolean<Line truncated
|
||||||
|
|||||||
+371
-567
File diff suppressed because it is too large.
Load diff
@@ -1,13 +1,18 @@
|
|||||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||||
page AvatarGroupDetail {
|
page AvatarGroupDetail {
|
||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"src\": \"/avatar-example.svg\",\n \"name\": \"Mark Wanner\",\n \"alt\": \"Mark Wanner\"\n },\n {\n \"src\": \"/avatar-example-2.svg\",\n \"name\": \"Maria Guan\",\n \"alt\": \"Maria Guan\"\n },\n {\n \"src\": \"/avatar-example-3.svg\",\n \"name\": \"Amil Evara\",\n \"alt\": \"Amil Evara\"\n },\n {\n \"initials\": \"EE\",\n \"name\": \"Ebele Egbuna\",\n \"color\": \"info\"\n }\n]"
|
||||||
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "lg"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Avatar Group example"
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
|
||||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar group for a modern application."
|
state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
|
||||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"avatar-group-0-1\",\n \"key\": \"avatar-group-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#avatar-group-demo\",\n \"actionHref\": \"#avatar-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"avatar-group-0-2\",\n \"key\": \"avatar-group-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#avatar-group-demo\",\n \"actionHref\": \"#avatar-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "stack"
|
||||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
state playground_maxVisible = ctx.url.searchParams.get("pg_maxVisible") ?? "4"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
|
||||||
|
state playground_borderColor = ctx.url.searchParams.get("pg_borderColor") ?? ""
|
||||||
|
state playground_showTooltips = ctx.url.searchParams.get("pg_showTooltips") ?? "true"
|
||||||
|
state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Show remaining members"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Avatar Group"
|
title = "Avatar Group"
|
||||||
description = "Theme-aware, responsive avatar group component."
|
description = "Theme-aware, responsive avatar group component."
|
||||||
@@ -21,243 +26,70 @@ page AvatarGroupDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Avatar Group</h1>
|
<h1>Avatar Group</h1>
|
||||||
<p>Theme-aware, responsive avatar group component.</p>
|
<p>Theme-aware, responsive avatar group component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>12 props</span><span>0 slots</span><span>1 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="AvatarGroup" data-playground-public-tag="true" data-playground-has-slot="true">
|
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="AvatarGroup" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar Group</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar Group</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="AvatarGroup" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="AvatarGroup" items="{playground_items}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" shape="{playground_shape}" layout="{playground_layout}" maxVisible="{playground_maxVisible}" columns="{playground_columns}" borderColor="{playground_borderColor}" showTooltips="{playground_showTooltips}" overflowLabel="{playground_overflowLabel}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><AvatarGroup
|
<pre><code data-playground-code><AvatarGroup
|
||||||
title="Avatar Group example"
|
|
||||||
description="A polished default avatar group for a modern application."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "avatar-group-0-1",
|
"src": "/avatar-example.svg",
|
||||||
"key": "avatar-group-0-1",
|
"name": "Mark Wanner",
|
||||||
"value": "primary",
|
"alt": "Mark Wanner"
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-group-demo",
|
|
||||||
"actionHref": "#avatar-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "avatar-group-0-2",
|
"src": "/avatar-example-2.svg",
|
||||||
"key": "avatar-group-0-2",
|
"name": "Maria Guan",
|
||||||
"value": "secondary",
|
"alt": "Maria Guan"
|
||||||
"label": "Additional option",
|
},
|
||||||
"title": "Supporting example",
|
{
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"src": "/avatar-example-3.svg",
|
||||||
"text": "Another configurable message.",
|
"name": "Amil Evara",
|
||||||
"href": "#avatar-group-demo",
|
"alt": "Amil Evara"
|
||||||
"actionHref": "#avatar-group-demo",
|
},
|
||||||
"actionLabel": "View details",
|
{
|
||||||
"icon": "icon-[lucide--sparkles]",
|
"initials": "EE",
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
"name": "Ebele Egbuna",
|
||||||
"variant": "primary",
|
"color": "info"
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
size="lg"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-avatar-group-title" name="pg_title" type="text" value="Avatar Group example" /></label><label class="playground-field" for="playground-avatar-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-group-description" name="pg_description" type="text" value="A polished default avatar group for a modern application." /></label><label class="playground-field" for="playground-avatar-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-avatar-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "avatar-group-0-1",
|
"src": "/avatar-example.svg",
|
||||||
"key": "avatar-group-0-1",
|
"name": "Mark Wanner",
|
||||||
"value": "primary",
|
"alt": "Mark Wanner"
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-group-demo",
|
|
||||||
"actionHref": "#avatar-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "avatar-group-0-2",
|
"src": "/avatar-example-2.svg",
|
||||||
"key": "avatar-group-0-2",
|
"name": "Maria Guan",
|
||||||
"value": "secondary",
|
"alt": "Maria Guan"
|
||||||
"label": "Additional option",
|
},
|
||||||
"title": "Supporting example",
|
{
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"src": "/avatar-example-3.svg",
|
||||||
"text": "Another configurable message.",
|
"name": "Amil Evara",
|
||||||
"href": "#avatar-group-demo",
|
"alt": "Amil Evara"
|
||||||
"actionHref": "#avatar-group-demo",
|
},
|
||||||
"actionLabel": "View details",
|
{
|
||||||
"icon": "icon-[lucide--sparkles]",
|
"initials": "EE",
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
"name": "Ebele Egbuna",
|
||||||
"variant": "primary",
|
"color": "info"
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-avatar-group-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="lg" selected>lg</option><option value="md">md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-avatar-group-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><input id="playground-avatar-group-shape" name="pg_shape" type="text" value="circle" /></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><input id="playground-avatar-group-layout" name="pg_layout" type="text" value="stack" /></label><label class="playground-field" for="playground-avatar-group-maxVisible"><span><strong>max Visible</strong><small>number</small></span><input id="playground-avatar-group-maxVisible" name="pg_maxVisible" type="number" value="4" /></label><label class="playground-field" for="playground-avatar-group-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-avatar-group-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-borderColor"><span><strong>border Color</strong><small>string</small></span><input id="playground-avatar-group-borderColor" name="pg_borderColor" type="text" value="" /></label><label class="playground-toggle" for="playground-avatar-group-showTooltips"><span><strong>show Tooltips</strong><small>boolean</small></span><input id="playground-avatar-group-showTooltips" name="pg_showTooltips" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-avatar-group-overflowLabel"><span><strong>overflow Label</strong><small>string</small></span><input id="playground-avatar-group-overflowLabel" name="pg_overflowLabel" type="text" value="Show remaining members" /></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -266,394 +98,252 @@ page AvatarGroupDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Facepile</span><h2>Overlapping stack</h2><p>Overlap avatars with negative spacing to create a compact team facepile.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="avatar-group-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="avatar-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="AvatarGroup" size="default" title="Avatar Group example" description="A polished default avatar group for a modern application." items="[{"id":"avatar-group-0-1","key":"avatar-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-0-2","key":"avatar-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="AvatarGroup" items="[{"src":"/avatar-example.svg","name":"Mark Wanner","alt":"Mark Wanner"},{"src":"/avatar-example-2.svg","name":"Maria Guan","alt":"Maria Guan"},{"src":"/avatar-example-3.svg","name":"Amil Evara","alt":"Amil Evara"},{"initials":"EE","name":"Ebele Egbuna","color":"info"}]" size="lg" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Overlapping stack usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><AvatarGroup
|
<pre><code><AvatarGroup
|
||||||
title="Avatar Group example"
|
|
||||||
description="A polished default avatar group for a modern application."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "avatar-group-0-1",
|
"src": "/avatar-example.svg",
|
||||||
"key": "avatar-group-0-1",
|
"name": "Mark Wanner",
|
||||||
"value": "primary",
|
"alt": "Mark Wanner"
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-group-demo",
|
|
||||||
"actionHref": "#avatar-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "avatar-group-0-2",
|
"src": "/avatar-example-2.svg",
|
||||||
"key": "avatar-group-0-2",
|
"name": "Maria Guan",
|
||||||
"value": "secondary",
|
"alt": "Maria Guan"
|
||||||
"label": "Additional option",
|
},
|
||||||
"title": "Supporting example",
|
{
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"src": "/avatar-example-3.svg",
|
||||||
"text": "Another configurable message.",
|
"name": "Amil Evara",
|
||||||
"href": "#avatar-group-demo",
|
"alt": "Amil Evara"
|
||||||
"actionHref": "#avatar-group-demo",
|
},
|
||||||
"actionLabel": "View details",
|
{
|
||||||
"icon": "icon-[lucide--sparkles]",
|
"initials": "EE",
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
"name": "Ebele Egbuna",
|
||||||
"variant": "primary",
|
"color": "info"
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
size="lg"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Grid layout</h2><p>Arrange members in a grid with equal spacing and a clear overflow count.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="avatar-group-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="avatar-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="AvatarGroup" size="sm" title="Compact Avatar Group" description="A compact configuration for dashboards and dense product surfaces." items="[{"id":"avatar-group-1-1","key":"avatar-group-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-1-2","key":"avatar-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="AvatarGroup" items="[{"src":"/avatar-example.svg","name":"Mark Wanner","alt":"Mark Wanner"},{"src":"/avatar-example-2.svg","name":"Maria Guan","alt":"Maria Guan"},{"src":"/avatar-example-3.svg","name":"Amil Evara","alt":"Amil Evara"},{"initials":"EE","name":"Ebele Egbuna","color":"info"},{"initials":"CL","name":"Chris Lynch","color":"success"},{"initials":"NS","name":"Nora Singh","color":"warning"},{"initials":"JR","name":"Jon Rivera","color":"danger"},{"initials":"AK","name":"Amina Khan","color":"secondary"}]" size="md" color="primary" variant="solid" shape="circle" layout="grid" maxVisible="7" columns="3"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Grid layout usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><AvatarGroup
|
<pre><code><AvatarGroup
|
||||||
size="sm"
|
|
||||||
title="Compact Avatar Group"
|
|
||||||
description="A compact configuration for dashboards and dense product surfaces."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "avatar-group-1-1",
|
"src": "/avatar-example.svg",
|
||||||
"key": "avatar-group-1-1",
|
"name": "Mark Wanner",
|
||||||
"value": "primary",
|
"alt": "Mark Wanner"
|
||||||
"label": "Secondary workflow",
|
|
||||||
"title": "Secondary workflow",
|
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-group-demo",
|
|
||||||
"actionHref": "#avatar-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--zap]",
|
|
||||||
"iconClass": "icon-[lucide--zap]",
|
|
||||||
"variant": "secondary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "10:15",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 24,
|
|
||||||
"percentage": 48,
|
|
||||||
"color": "#0284c7",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open secondary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "avatar-group-1-2",
|
"src": "/avatar-example-2.svg",
|
||||||
"key": "avatar-group-1-2",
|
"name": "Maria Guan",
|
||||||
"value": "secondary",
|
"alt": "Maria Guan"
|
||||||
"label": "Additional option",
|
},
|
||||||
"title": "Supporting example",
|
{
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
"src": "/avatar-example-3.svg",
|
||||||
"text": "Another configurable message.",
|
"name": "Amil Evara",
|
||||||
"href": "#avatar-group-demo",
|
"alt": "Amil Evara"
|
||||||
"actionHref": "#avatar-group-demo",
|
},
|
||||||
"actionLabel": "View details",
|
{
|
||||||
"icon": "icon-[lucide--zap]",
|
"initials": "EE",
|
||||||
"iconClass": "icon-[lucide--zap]",
|
"name": "Ebele Egbuna",
|
||||||
"variant": "secondary",
|
"color": "info"
|
||||||
"status": "Active",
|
},
|
||||||
"time": "10:15",
|
{
|
||||||
"current": false,
|
"initials": "CL",
|
||||||
"selected": false,
|
"name": "Chris Lynch",
|
||||||
"checked": false,
|
"color": "success"
|
||||||
"disabled": false,
|
},
|
||||||
"outgoing": true,
|
{
|
||||||
"open": true,
|
"initials": "NS",
|
||||||
"number": 2,
|
"name": "Nora Singh",
|
||||||
"count": 48,
|
"color": "warning"
|
||||||
"percentage": 48,
|
},
|
||||||
"color": "#0284c7",
|
{
|
||||||
"target": "_self",
|
"initials": "JR",
|
||||||
"ariaLabel": "Open secondary workflow 2",
|
"name": "Jon Rivera",
|
||||||
"items": [
|
"color": "danger"
|
||||||
{
|
},
|
||||||
"label": "Nested option A",
|
{
|
||||||
"value": "nested-a"
|
"initials": "AK",
|
||||||
},
|
"name": "Amina Khan",
|
||||||
{
|
"color": "secondary"
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
variant="secondary"
|
layout="grid"
|
||||||
|
maxVisible="7"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Border</span><h2>Custom border color</h2><p>Change the ring color so stacked groups remain distinct on different surfaces.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="avatar-group-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="avatar-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="AvatarGroup" size="lg" title="Advanced Avatar Group" description="A richer configuration demonstrating additional content and hierarchy." items="[{"id":"avatar-group-2-1","key":"avatar-group-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"avatar-group-2-2","key":"avatar-group-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="AvatarGroup" items="[{"src":"/avatar-example.svg","name":"Mark Wanner","alt":"Mark Wanner"},{"src":"/avatar-example-2.svg","name":"Maria Guan","alt":"Maria Guan"},{"src":"/avatar-example-3.svg","name":"Amil Evara","alt":"Amil Evara"},{"initials":"EE","name":"Ebele Egbuna","color":"info"}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" borderColor="#2583ff"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Custom border color usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><AvatarGroup
|
<pre><code><AvatarGroup
|
||||||
size="lg"
|
|
||||||
title="Advanced Avatar Group"
|
|
||||||
description="A richer configuration demonstrating additional content and hierarchy."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "avatar-group-2-1",
|
"src": "/avatar-example.svg",
|
||||||
"key": "avatar-group-2-1",
|
"name": "Mark Wanner",
|
||||||
"value": "primary",
|
"alt": "Mark Wanner"
|
||||||
"label": "Advanced workflow",
|
|
||||||
"title": "Advanced workflow",
|
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-group-demo",
|
|
||||||
"actionHref": "#avatar-group-demo",
|
|
||||||
"actionLabel": "Explore workflow",
|
|
||||||
"icon": "icon-[lucide--circle-check]",
|
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
|
||||||
"variant": "success",
|
|
||||||
"status": "Complete",
|
|
||||||
"time": "11:45",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 91,
|
|
||||||
"color": "#059669",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open advanced workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Unlimited"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "avatar-group-2-2",
|
"src": "/avatar-example-2.svg",
|
||||||
"key": "avatar-group-2-2",
|
"name": "Maria Guan",
|
||||||
"value": "secondary",
|
"alt": "Maria Guan"
|
||||||
"label": "Additional option",
|
},
|
||||||
"title": "Supporting example",
|
{
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
"src": "/avatar-example-3.svg",
|
||||||
"text": "Another configurable message.",
|
"name": "Amil Evara",
|
||||||
"href": "#avatar-group-demo",
|
"alt": "Amil Evara"
|
||||||
"actionHref": "#avatar-group-demo",
|
},
|
||||||
"actionLabel": "Explore workflow",
|
{
|
||||||
"icon": "icon-[lucide--circle-check]",
|
"initials": "EE",
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
"name": "Ebele Egbuna",
|
||||||
"variant": "success",
|
"color": "info"
|
||||||
"status": "Complete",
|
}
|
||||||
"time": "11:45",
|
]'
|
||||||
"current": false,
|
borderColor="#2583ff"
|
||||||
"selected": false,
|
/></code></pre>
|
||||||
"checked": false,
|
</section>
|
||||||
"disabled": true,
|
</div>
|
||||||
"outgoing": true,
|
</article>
|
||||||
"open": true,
|
<article class="demo-case">
|
||||||
"number": 2,
|
<header class="demo-case-header">
|
||||||
"count": 64,
|
<div><span class="demo-case-eyebrow">Tooltip</span><h2>Member tooltips</h2><p>Reveal each member's name on pointer hover or keyboard focus.</p></div>
|
||||||
"percentage": 91,
|
<span class="demo-case-number">04</span>
|
||||||
"color": "#059669",
|
</header>
|
||||||
"target": "_self",
|
<div class="demo-workbench">
|
||||||
"ariaLabel": "Open advanced workflow 2",
|
<div id="avatar-group-demo-4" class="demo-canvas demo-canvas--4">
|
||||||
"items": [
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
{
|
<div class="demo-render"><div data-component="AvatarGroup" items="[{"src":"/avatar-example.svg","name":"Mark Wanner","alt":"Mark Wanner"},{"src":"/avatar-example-2.svg","name":"Maria Guan","alt":"Maria Guan"},{"src":"/avatar-example-3.svg","name":"Amil Evara","alt":"Amil Evara"},{"initials":"EE","name":"Ebele Egbuna","color":"info"}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" showTooltips="true"></div></div>
|
||||||
"label": "Nested option A",
|
</div>
|
||||||
"value": "nested-a"
|
<section class="demo-code" aria-label="Member tooltips usage">
|
||||||
},
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
{
|
<pre><code><AvatarGroup
|
||||||
"label": "Nested option B",
|
items='[
|
||||||
"value": "nested-b"
|
{
|
||||||
}
|
"src": "/avatar-example.svg",
|
||||||
],
|
"name": "Mark Wanner",
|
||||||
"links": [
|
"alt": "Mark Wanner"
|
||||||
{
|
},
|
||||||
"label": "Documentation",
|
{
|
||||||
"href": "#documentation"
|
"src": "/avatar-example-2.svg",
|
||||||
},
|
"name": "Maria Guan",
|
||||||
{
|
"alt": "Maria Guan"
|
||||||
"label": "API reference",
|
},
|
||||||
"href": "#api-reference"
|
{
|
||||||
}
|
"src": "/avatar-example-3.svg",
|
||||||
],
|
"name": "Amil Evara",
|
||||||
"values": [
|
"alt": "Amil Evara"
|
||||||
"Included",
|
},
|
||||||
"Unlimited"
|
{
|
||||||
]
|
"initials": "EE",
|
||||||
|
"name": "Ebele Egbuna",
|
||||||
|
"color": "info"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Overflow</span><h2>Dropdown overflow</h2><p>Open the overflow counter to inspect members hidden by the visible limit.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-group-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"><div data-component="AvatarGroup" items="[{"src":"/avatar-example.svg","name":"Mark Wanner","alt":"Mark Wanner"},{"src":"/avatar-example-2.svg","name":"Maria Guan","alt":"Maria Guan"},{"src":"/avatar-example-3.svg","name":"Amil Evara","alt":"Amil Evara"},{"initials":"EE","name":"Ebele Egbuna","color":"info"},{"initials":"CL","name":"Chris Lynch","color":"success"},{"initials":"NS","name":"Nora Singh","color":"warning"},{"initials":"JR","name":"Jon Rivera","color":"danger"},{"initials":"AK","name":"Amina Khan","color":"secondary"}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" showTooltips="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Dropdown overflow usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><AvatarGroup
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"src": "/avatar-example.svg",
|
||||||
|
"name": "Mark Wanner",
|
||||||
|
"alt": "Mark Wanner"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/avatar-example-2.svg",
|
||||||
|
"name": "Maria Guan",
|
||||||
|
"alt": "Maria Guan"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/avatar-example-3.svg",
|
||||||
|
"name": "Amil Evara",
|
||||||
|
"alt": "Amil Evara"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"initials": "EE",
|
||||||
|
"name": "Ebele Egbuna",
|
||||||
|
"color": "info"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"initials": "CL",
|
||||||
|
"name": "Chris Lynch",
|
||||||
|
"color": "success"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"initials": "NS",
|
||||||
|
"name": "Nora Singh",
|
||||||
|
"color": "warning"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"initials": "JR",
|
||||||
|
"name": "Jon Rivera",
|
||||||
|
"color": "danger"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"initials": "AK",
|
||||||
|
"name": "Amina Khan",
|
||||||
|
"color": "secondary"
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
variant="success"
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@overflow</code><span>Fires when the component emits the overflow event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Avatar Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('overflow', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</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>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>"circle"</code></td><td>No</td></tr><tr><td><code>layout</code></td><td>string</td><td><code>"stack"</code></td><td>No</td></tr><tr><td><code>maxVisible</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>borderColor</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showTooltips</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>overflowLabel</code></td><td>string</td><td><code>"Show remaining members"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-group-demo-1">Production default</a><a href="#avatar-group-demo-2">Compact application</a><a href="#avatar-group-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-group-demo-1">Overlapping stack</a><a href="#avatar-group-demo-2">Grid layout</a><a href="#avatar-group-demo-3">Custom border color</a><a href="#avatar-group-demo-4">Member tooltips</a><a href="#avatar-group-demo-5">Dropdown overflow</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
+345
-571
@@ -1,13 +1,24 @@
|
|||||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||||
page AvatarDetail {
|
page AvatarDetail {
|
||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_src = ctx.url.searchParams.get("pg_src") ?? "/avatar-example.svg"
|
||||||
|
state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "Example profile portrait"
|
||||||
|
state playground_initials = ctx.url.searchParams.get("pg_initials") ?? ""
|
||||||
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "xs"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Avatar example"
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
|
||||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar for a modern application."
|
state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
|
||||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"avatar-0-1\",\n \"key\": \"avatar-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#avatar-demo\",\n \"actionHref\": \"#avatar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"avatar-0-2\",\n \"key\": \"avatar-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#avatar-demo\",\n \"actionHref\": \"#avatar-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
state playground_status = ctx.url.searchParams.get("pg_status") ?? ""
|
||||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? ""
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_statusPosition = ctx.url.searchParams.get("pg_statusPosition") ?? "bottom"
|
||||||
|
state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
|
||||||
|
state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? ""
|
||||||
|
state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? ""
|
||||||
|
state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? ""
|
||||||
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
||||||
|
state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
|
||||||
|
state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Avatar"
|
title = "Avatar"
|
||||||
description = "Theme-aware, responsive avatar component."
|
description = "Theme-aware, responsive avatar component."
|
||||||
@@ -21,243 +32,29 @@ page AvatarDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Avatar</h1>
|
<h1>Avatar</h1>
|
||||||
<p>Theme-aware, responsive avatar component.</p>
|
<p>Theme-aware, responsive avatar component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>18 props</span><span>0 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Avatar" data-playground-public-tag="true" data-playground-has-slot="true">
|
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Avatar" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Avatar" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Avatar" src="{playground_src}" alt="{playground_alt}" initials="{playground_initials}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" shape="{playground_shape}" status="{playground_status}" statusLabel="{playground_statusLabel}" statusPosition="{playground_statusPosition}" badge="{playground_badge}" badgeIcon="{playground_badgeIcon}" badgeLabel="{playground_badgeLabel}" tooltip="{playground_tooltip}" name="{playground_name}" description="{playground_description}" loading="{playground_loading}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Avatar
|
<pre><code data-playground-code><Avatar
|
||||||
title="Avatar example"
|
src="/avatar-example.svg"
|
||||||
description="A polished default avatar for a modern application."
|
alt="Example profile portrait"
|
||||||
items='[
|
size="xs"
|
||||||
{
|
|
||||||
"id": "avatar-0-1",
|
|
||||||
"key": "avatar-0-1",
|
|
||||||
"value": "primary",
|
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-demo",
|
|
||||||
"actionHref": "#avatar-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "avatar-0-2",
|
|
||||||
"key": "avatar-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#avatar-demo",
|
|
||||||
"actionHref": "#avatar-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]'
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-title"><span><strong>title</strong><small>string</small></span><input id="playground-avatar-title" name="pg_title" type="text" value="Avatar example" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="A polished default avatar for a modern application." /></label><label class="playground-field" for="playground-avatar-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-avatar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="/avatar-example.svg" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="Example profile portrait" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="xs" selected>xs</option><option value="md">md</option><option value="default">default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-avatar-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><input id="playground-avatar-shape" name="pg_shape" type="text" value="circle" /></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="" /></label></div>
|
||||||
{
|
|
||||||
"id": "avatar-0-1",
|
|
||||||
"key": "avatar-0-1",
|
|
||||||
"value": "primary",
|
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-demo",
|
|
||||||
"actionHref": "#avatar-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "avatar-0-2",
|
|
||||||
"key": "avatar-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#avatar-demo",
|
|
||||||
"actionHref": "#avatar-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-avatar-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -266,394 +63,371 @@ page AvatarDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Extra-small circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="avatar-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="avatar-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Avatar" size="default" title="Avatar example" description="A polished default avatar for a modern application." items="[{"id":"avatar-0-1","key":"avatar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-0-2","key":"avatar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xs" color="primary" variant="solid" shape="circle"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Extra-small circular avatar usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Avatar
|
<pre><code><Avatar
|
||||||
title="Avatar example"
|
src="/avatar-example.svg"
|
||||||
description="A polished default avatar for a modern application."
|
alt="Example profile portrait"
|
||||||
items='[
|
size="xs"
|
||||||
{
|
|
||||||
"id": "avatar-0-1",
|
|
||||||
"key": "avatar-0-1",
|
|
||||||
"value": "primary",
|
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-demo",
|
|
||||||
"actionHref": "#avatar-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "avatar-0-2",
|
|
||||||
"key": "avatar-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#avatar-demo",
|
|
||||||
"actionHref": "#avatar-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]'
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Small circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="avatar-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="avatar-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Avatar" size="sm" title="Compact Avatar" description="A compact configuration for dashboards and dense product surfaces." items="[{"id":"avatar-1-1","key":"avatar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-1-2","key":"avatar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="sm" color="primary" variant="solid" shape="circle"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Small circular avatar usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Avatar
|
<pre><code><Avatar
|
||||||
|
src="/avatar-example.svg"
|
||||||
|
alt="Example profile portrait"
|
||||||
size="sm"
|
size="sm"
|
||||||
title="Compact Avatar"
|
|
||||||
description="A compact configuration for dashboards and dense product surfaces."
|
|
||||||
items='[
|
|
||||||
{
|
|
||||||
"id": "avatar-1-1",
|
|
||||||
"key": "avatar-1-1",
|
|
||||||
"value": "primary",
|
|
||||||
"label": "Secondary workflow",
|
|
||||||
"title": "Secondary workflow",
|
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#avatar-demo",
|
|
||||||
"actionHref": "#avatar-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--zap]",
|
|
||||||
"iconClass": "icon-[lucide--zap]",
|
|
||||||
"variant": "secondary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "10:15",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 24,
|
|
||||||
"percentage": 48,
|
|
||||||
"color": "#0284c7",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open secondary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "avatar-1-2",
|
|
||||||
"key": "avatar-1-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#avatar-demo",
|
|
||||||
"actionHref": "#avatar-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"
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Medium circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="avatar-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="avatar-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Avatar" size="lg" title="Advanced Avatar" description="A richer configuration demonstrating additional content and hierarchy." items="[{"id":"avatar-2-1","key":"avatar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"avatar-2-2","key":"avatar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#avatar-demo","actionHref":"#avatar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="md" color="primary" variant="solid" shape="circle"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Medium circular avatar usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Avatar
|
<pre><code><Avatar
|
||||||
|
src="/avatar-example.svg"
|
||||||
|
alt="Example profile portrait"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Large circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="lg" color="primary" variant="solid" shape="circle"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Large circular avatar usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
src="/avatar-example.svg"
|
||||||
|
alt="Example profile portrait"
|
||||||
size="lg"
|
size="lg"
|
||||||
title="Advanced Avatar"
|
/></code></pre>
|
||||||
description="A richer configuration demonstrating additional content and hierarchy."
|
</section>
|
||||||
items='[
|
</div>
|
||||||
{
|
</article>
|
||||||
"id": "avatar-2-1",
|
<article class="demo-case">
|
||||||
"key": "avatar-2-1",
|
<header class="demo-case-header">
|
||||||
"value": "primary",
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Extra-large circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
||||||
"label": "Advanced workflow",
|
<span class="demo-case-number">05</span>
|
||||||
"title": "Advanced workflow",
|
</header>
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
<div class="demo-workbench">
|
||||||
"text": "A configurable sample message.",
|
<div id="avatar-demo-5" class="demo-canvas demo-canvas--5">
|
||||||
"href": "#avatar-demo",
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
"actionHref": "#avatar-demo",
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xl" color="primary" variant="solid" shape="circle"></div></div>
|
||||||
"actionLabel": "Explore workflow",
|
</div>
|
||||||
"icon": "icon-[lucide--circle-check]",
|
<section class="demo-code" aria-label="Extra-large circular avatar usage">
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
"variant": "success",
|
<pre><code><Avatar
|
||||||
"status": "Complete",
|
src="/avatar-example.svg"
|
||||||
"time": "11:45",
|
alt="Example profile portrait"
|
||||||
"current": true,
|
size="xl"
|
||||||
"selected": true,
|
/></code></pre>
|
||||||
"checked": true,
|
</section>
|
||||||
"disabled": false,
|
</div>
|
||||||
"outgoing": false,
|
</article>
|
||||||
"open": true,
|
<article class="demo-case">
|
||||||
"number": 1,
|
<header class="demo-case-header">
|
||||||
"count": 32,
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Rounded avatars</h2><p>Apply softly rounded corners when a circle is not the right fit.</p></div>
|
||||||
"percentage": 91,
|
<span class="demo-case-number">06</span>
|
||||||
"color": "#059669",
|
</header>
|
||||||
"target": "_self",
|
<div class="demo-workbench">
|
||||||
"ariaLabel": "Open advanced workflow 1",
|
<div id="avatar-demo-6" class="demo-canvas demo-canvas--6">
|
||||||
"items": [
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
{
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example rounded profile portrait" size="lg" color="primary" variant="solid" shape="rounded"></div></div>
|
||||||
"label": "Nested option A",
|
</div>
|
||||||
"value": "nested-a"
|
<section class="demo-code" aria-label="Rounded avatars usage">
|
||||||
},
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
{
|
<pre><code><Avatar
|
||||||
"label": "Nested option B",
|
src="/avatar-example.svg"
|
||||||
"value": "nested-b"
|
alt="Example rounded profile portrait"
|
||||||
}
|
size="lg"
|
||||||
],
|
shape="rounded"
|
||||||
"links": [
|
/></code></pre>
|
||||||
{
|
</section>
|
||||||
"label": "Documentation",
|
</div>
|
||||||
"href": "#documentation"
|
</article>
|
||||||
},
|
<article class="demo-case">
|
||||||
{
|
<header class="demo-case-header">
|
||||||
"label": "API reference",
|
<div><span class="demo-case-eyebrow">Status</span><h2>Circular avatars with top status</h2><p>Place a clear presence indicator at the requested avatar edge.</p></div>
|
||||||
"href": "#api-reference"
|
<span class="demo-case-number">07</span>
|
||||||
}
|
</header>
|
||||||
],
|
<div class="demo-workbench">
|
||||||
"values": [
|
<div id="avatar-demo-7" class="demo-canvas demo-canvas--7">
|
||||||
"Included",
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
"Unlimited"
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="online" statusLabel="Online" statusPosition="top"></div></div>
|
||||||
]
|
</div>
|
||||||
},
|
<section class="demo-code" aria-label="Circular avatars with top status usage">
|
||||||
{
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
"id": "avatar-2-2",
|
<pre><code><Avatar
|
||||||
"key": "avatar-2-2",
|
src="/avatar-example.svg"
|
||||||
"value": "secondary",
|
alt="Avery Chen"
|
||||||
"label": "Additional option",
|
size="lg"
|
||||||
"title": "Supporting example",
|
status="online"
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
statusLabel="Online"
|
||||||
"text": "Another configurable message.",
|
statusPosition="top"
|
||||||
"href": "#avatar-demo",
|
/></code></pre>
|
||||||
"actionHref": "#avatar-demo",
|
</section>
|
||||||
"actionLabel": "Explore workflow",
|
</div>
|
||||||
"icon": "icon-[lucide--circle-check]",
|
</article>
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
<article class="demo-case">
|
||||||
"variant": "success",
|
<header class="demo-case-header">
|
||||||
"status": "Complete",
|
<div><span class="demo-case-eyebrow">Status</span><h2>Circular avatars with bottom status</h2><p>Place a clear presence indicator at the requested avatar edge.</p></div>
|
||||||
"time": "11:45",
|
<span class="demo-case-number">08</span>
|
||||||
"current": false,
|
</header>
|
||||||
"selected": false,
|
<div class="demo-workbench">
|
||||||
"checked": false,
|
<div id="avatar-demo-8" class="demo-canvas demo-canvas--8">
|
||||||
"disabled": true,
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
"outgoing": true,
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="away" statusLabel="Away" statusPosition="bottom"></div></div>
|
||||||
"open": true,
|
</div>
|
||||||
"number": 2,
|
<section class="demo-code" aria-label="Circular avatars with bottom status usage">
|
||||||
"count": 64,
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
"percentage": 91,
|
<pre><code><Avatar
|
||||||
"color": "#059669",
|
src="/avatar-example.svg"
|
||||||
"target": "_self",
|
alt="Avery Chen"
|
||||||
"ariaLabel": "Open advanced workflow 2",
|
size="lg"
|
||||||
"items": [
|
status="away"
|
||||||
{
|
statusLabel="Away"
|
||||||
"label": "Nested option A",
|
/></code></pre>
|
||||||
"value": "nested-a"
|
</section>
|
||||||
},
|
</div>
|
||||||
{
|
</article>
|
||||||
"label": "Nested option B",
|
<article class="demo-case">
|
||||||
"value": "nested-b"
|
<header class="demo-case-header">
|
||||||
}
|
<div><span class="demo-case-eyebrow">Fallbacks</span><h2>Avatars with brand icons</h2><p>Overlay a service or platform icon to identify a linked account.</p></div>
|
||||||
],
|
<span class="demo-case-number">09</span>
|
||||||
"links": [
|
</header>
|
||||||
{
|
<div class="demo-workbench">
|
||||||
"label": "Documentation",
|
<div id="avatar-demo-9" class="demo-canvas demo-canvas--9">
|
||||||
"href": "#documentation"
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
},
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Linked profile" size="lg" color="primary" variant="solid" shape="circle" badgeIcon="icon-[lucide--message-square]" badgeLabel="Messaging account"></div></div>
|
||||||
{
|
</div>
|
||||||
"label": "API reference",
|
<section class="demo-code" aria-label="Avatars with brand icons usage">
|
||||||
"href": "#api-reference"
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
}
|
<pre><code><Avatar
|
||||||
],
|
src="/avatar-example.svg"
|
||||||
"values": [
|
alt="Linked profile"
|
||||||
"Included",
|
size="lg"
|
||||||
"Unlimited"
|
badgeIcon="icon-[lucide--message-square]"
|
||||||
]
|
badgeLabel="Messaging account"
|
||||||
}
|
/></code></pre>
|
||||||
]'
|
</section>
|
||||||
variant="success"
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Fallbacks</span><h2>Placeholder icon</h2><p>Show a generic person icon when no profile image is available.</p></div>
|
||||||
|
<span class="demo-case-number">010</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" alt="Anonymous profile" size="lg" color="primary" variant="soft" shape="circle"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Placeholder icon usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
alt="Anonymous profile"
|
||||||
|
size="lg"
|
||||||
|
variant="soft"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Fallbacks</span><h2>Placeholder initials</h2><p>Use initials as an accessible text fallback for a missing image.</p></div>
|
||||||
|
<span class="demo-case-number">011</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="primary" variant="solid" shape="circle"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Placeholder initials usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
alt="Avery Chen"
|
||||||
|
initials="AC"
|
||||||
|
size="lg"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Solid color variants</h2><p>Use the solid treatment across semantic avatar colors.</p></div>
|
||||||
|
<span class="demo-case-number">012</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="success" variant="solid" shape="circle"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Solid color variants usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
alt="Avery Chen"
|
||||||
|
initials="AC"
|
||||||
|
size="lg"
|
||||||
|
color="success"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Soft color variants</h2><p>Use the soft treatment across semantic avatar colors.</p></div>
|
||||||
|
<span class="demo-case-number">013</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="info" variant="soft" shape="circle"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Soft color variants usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
alt="Avery Chen"
|
||||||
|
initials="AC"
|
||||||
|
size="lg"
|
||||||
|
color="info"
|
||||||
|
variant="soft"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Outline color variants</h2><p>Use the outline treatment across semantic avatar colors.</p></div>
|
||||||
|
<span class="demo-case-number">014</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="danger" variant="outline" shape="circle"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Outline color variants usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
alt="Avery Chen"
|
||||||
|
initials="AC"
|
||||||
|
size="lg"
|
||||||
|
color="danger"
|
||||||
|
variant="outline"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>White color variants</h2><p>Use the white treatment across semantic avatar colors.</p></div>
|
||||||
|
<span class="demo-case-number">015</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="primary" variant="white" shape="circle"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="White color variants usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
alt="Avery Chen"
|
||||||
|
initials="AC"
|
||||||
|
size="lg"
|
||||||
|
variant="white"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Composition</span><h2>Avatar with tooltip</h2><p>Reveal a name or extra context on hover and keyboard focus.</p></div>
|
||||||
|
<span class="demo-case-number">016</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="online" tooltip="Avery Chen · Online" name="Avery Chen"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Avatar with tooltip usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
src="/avatar-example.svg"
|
||||||
|
alt="Avery Chen"
|
||||||
|
size="lg"
|
||||||
|
status="online"
|
||||||
|
tooltip="Avery Chen · Online"
|
||||||
|
name="Avery Chen"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Composition</span><h2>Media object</h2><p>Combine an avatar with supporting text for profile and activity rows.</p></div>
|
||||||
|
<span class="demo-case-number">017</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="avatar-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"><div data-component="Avatar" src="/avatar-example.svg" alt="Mark Wanner" size="lg" color="primary" variant="solid" shape="circle" name="Mark Wanner" description="mark@example.com"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Media object usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Avatar
|
||||||
|
src="/avatar-example.svg"
|
||||||
|
alt="Mark Wanner"
|
||||||
|
size="lg"
|
||||||
|
name="Mark Wanner"
|
||||||
|
description="mark@example.com"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Avatar"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('load', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>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>initials</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>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>"circle"</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>statusLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>statusPosition</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tooltip</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>description</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>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-demo-1">Production default</a><a href="#avatar-demo-2">Compact application</a><a href="#avatar-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-demo-1">Extra-small circular avatar</a><a href="#avatar-demo-2">Small circular avatar</a><a href="#avatar-demo-3">Medium circular avatar</a><a href="#avatar-demo-4">Large circular avatar</a><a href="#avatar-demo-5">Extra-large circular avatar</a><a href="#avatar-demo-6">Rounded avatars</a><a href="#avatar-demo-7">Circular avatars with top status</a><a href="#avatar-demo-8">Circular avatars with bottom status</a><a href="#avatar-demo-9">Avatars with brand icons</a><a href="#avatar-demo-10">Placeholder icon</a><a href="#avatar-demo-11">Placeholder initials</a><a href="#avatar-demo-12">Solid color variants</a><a href="#avatar-demo-13">Soft color variants</a><a href="#avatar-demo-14">Outline color variants</a><a href="#avatar-demo-15">White color variants</a><a href="#avatar-demo-16">Avatar with tooltip</a><a href="#avatar-demo-17">Media object</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
+309
-574
@@ -1,13 +1,28 @@
|
|||||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||||
page BadgeDetail {
|
page BadgeDetail {
|
||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Active"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
|
||||||
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Badge example"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "success"
|
||||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default badge for a modern application."
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
|
||||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"badge-0-1\",\n \"key\": \"badge-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#badge-demo\",\n \"actionHref\": \"#badge-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"badge-0-2\",\n \"key\": \"badge-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#badge-demo\",\n \"actionHref\": \"#badge-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "pill"
|
||||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_dot = ctx.url.searchParams.get("pg_dot") ?? "false"
|
||||||
|
state playground_dotOnly = ctx.url.searchParams.get("pg_dotOnly") ?? "false"
|
||||||
|
state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Status"
|
||||||
|
state playground_animated = ctx.url.searchParams.get("pg_animated") ?? "false"
|
||||||
|
state playground_avatarSrc = ctx.url.searchParams.get("pg_avatarSrc") ?? ""
|
||||||
|
state playground_avatarAlt = ctx.url.searchParams.get("pg_avatarAlt") ?? ""
|
||||||
|
state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "false"
|
||||||
|
state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Remove badge"
|
||||||
|
state playground_truncate = ctx.url.searchParams.get("pg_truncate") ?? "false"
|
||||||
|
state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "12rem"
|
||||||
|
state playground_anchorLabel = ctx.url.searchParams.get("pg_anchorLabel") ?? ""
|
||||||
|
state playground_anchorIcon = ctx.url.searchParams.get("pg_anchorIcon") ?? ""
|
||||||
|
state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "inline"
|
||||||
|
state playground_anchorLabelText = ctx.url.searchParams.get("pg_anchorLabelText") ?? "Badge anchor"
|
||||||
seo {
|
seo {
|
||||||
title = "Badge"
|
title = "Badge"
|
||||||
description = "Theme-aware, responsive badge component."
|
description = "Theme-aware, responsive badge component."
|
||||||
@@ -21,243 +36,28 @@ page BadgeDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Badge</h1>
|
<h1>Badge</h1>
|
||||||
<p>Theme-aware, responsive badge component.</p>
|
<p>Theme-aware, responsive badge component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>22 props</span><span>0 slots</span><span>1 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Badge" data-playground-public-tag="true" data-playground-has-slot="true">
|
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Badge" data-playground-public-tag="true" data-playground-has-slot="false">
|
||||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Badge</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Badge</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Badge" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Badge" label="{playground_label}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" shape="{playground_shape}" class="{playground_class}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" dot="{playground_dot}" dotOnly="{playground_dotOnly}" dotLabel="{playground_dotLabel}" animated="{playground_animated}" avatarSrc="{playground_avatarSrc}" avatarAlt="{playground_avatarAlt}" dismissible="{playground_dismissible}" dismissLabel="{playground_dismissLabel}" truncate="{playground_truncate}" maxWidth="{playground_maxWidth}" anchorLabel="{playground_anchorLabel}" anchorIcon="{playground_anchorIcon}" placement="{playground_placement}" anchorLabelText="{playground_anchorLabelText}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Badge
|
<pre><code data-playground-code><Badge
|
||||||
title="Badge example"
|
label="Active"
|
||||||
description="A polished default badge for a modern application."
|
color="success"
|
||||||
items='[
|
|
||||||
{
|
|
||||||
"id": "badge-0-1",
|
|
||||||
"key": "badge-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": "#badge-demo",
|
|
||||||
"actionHref": "#badge-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": "badge-0-2",
|
|
||||||
"key": "badge-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#badge-demo",
|
|
||||||
"actionHref": "#badge-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]'
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-badge-size"><span><strong>size</strong><small>string</small></span><select id="playground-badge-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-badge-color"><span><strong>color</strong><small>string</small></span><select id="playground-badge-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-badge-title"><span><strong>title</strong><small>string</small></span><input id="playground-badge-title" name="pg_title" type="text" value="Badge example" /></label><label class="playground-field" for="playground-badge-description"><span><strong>description</strong><small>string</small></span><input id="playground-badge-description" name="pg_description" type="text" value="A polished default badge for a modern application." /></label><label class="playground-field" for="playground-badge-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-badge-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-badge-label"><span><strong>label</strong><small>string</small></span><input id="playground-badge-label" name="pg_label" type="text" value="Active" /></label><label class="playground-field" for="playground-badge-size"><span><strong>size</strong><small>string</small></span><select id="playground-badge-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-badge-color"><span><strong>color</strong><small>string</small></span><select id="playground-badge-color" name="pg_color"><option value="success" selected>success</option><option value="primary">primary</option><option value="secondary">secondary</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-badge-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-badge-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-badge-shape"><span><strong>shape</strong><small>string</small></span><input id="playground-badge-shape" name="pg_shape" type="text" value="pill" /></label><label class="playground-field" for="playground-badge-class"><span><strong>class</strong><small>string</small></span><input id="playground-badge-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-badge-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-badge-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-badge-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-badge-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-toggle" for="playground-badge-dot"><span><strong>dot</strong><small>boolean</small></span><input id="playground-badge-dot" name="pg_dot" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-badge-dotOnly"><span><strong>dot Only</strong><small>boolean</small></span><input id="playground-badge-dotOnly" name="pg_dotOnly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dotLabel"><span><strong>dot Label</strong><small>string</small></span><input id="playground-badge-dotLabel" name="pg_dotLabel" type="text" value="Status" /></label><label class="playground-toggle" for="playground-badge-animated"><span><strong>animated</strong><small>boolean</small></span><input id="playground-badge-animated" name="pg_animated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-badge-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-badge-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-badge-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-toggle" for="playground-badge-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-badge-dismissible" name="pg_dismissible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-badge-dismissLabel" name="pg_dismissLabel" type="text" value="Remove badge" /></label><label class="playground-toggle" for="playground-badge-truncate"><span><strong>truncate</strong><small>boolean</small></span><input id="playground-badge-truncate" name="pg_truncate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-badge-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-badge-maxWidth" name="pg_maxWidth" tyLine truncated
|
||||||
{
|
|
||||||
"id": "badge-0-1",
|
|
||||||
"key": "badge-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": "#badge-demo",
|
|
||||||
"actionHref": "#badge-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": "badge-0-2",
|
|
||||||
"key": "badge-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#badge-demo",
|
|
||||||
"actionHref": "#badge-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-badge-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-badge-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-badge-class"><span><strong>class</strong><small>string</small></span><input id="playground-badge-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -266,394 +66,329 @@ page BadgeDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Solid badge</h2><p>Use a solid fill for a high-emphasis status or category.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="badge-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="badge-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Badge" size="default" title="Badge example" description="A polished default badge for a modern application." items="[{"id":"badge-0-1","key":"badge-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":"#badge-demo","actionHref":"#badge-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":"badge-0-2","key":"badge-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#badge-demo","actionHref":"#badge-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Badge" label="Active" size="md" color="success" variant="solid" shape="pill"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Solid badge usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Badge
|
<pre><code><Badge
|
||||||
title="Badge example"
|
label="Active"
|
||||||
description="A polished default badge for a modern application."
|
color="success"
|
||||||
items='[
|
|
||||||
{
|
|
||||||
"id": "badge-0-1",
|
|
||||||
"key": "badge-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": "#badge-demo",
|
|
||||||
"actionHref": "#badge-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": "badge-0-2",
|
|
||||||
"key": "badge-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#badge-demo",
|
|
||||||
"actionHref": "#badge-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]'
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Soft badge</h2><p>Use a softer fill for a lower-contrast label.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="badge-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="badge-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Badge" size="sm" title="Compact Badge" description="A compact configuration for dashboards and dense product surfaces." items="[{"id":"badge-1-1","key":"badge-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":"#badge-demo","actionHref":"#badge-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":"badge-1-2","key":"badge-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#badge-demo","actionHref":"#badge-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Badge" label="In review" size="md" color="info" variant="soft" shape="pill"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Soft badge usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Badge
|
<pre><code><Badge
|
||||||
size="sm"
|
label="In review"
|
||||||
title="Compact Badge"
|
color="info"
|
||||||
description="A compact configuration for dashboards and dense product surfaces."
|
variant="soft"
|
||||||
items='[
|
|
||||||
{
|
|
||||||
"id": "badge-1-1",
|
|
||||||
"key": "badge-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": "#badge-demo",
|
|
||||||
"actionHref": "#badge-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": "badge-1-2",
|
|
||||||
"key": "badge-1-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#badge-demo",
|
|
||||||
"actionHref": "#badge-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"
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Outline badge</h2><p>Use an outlined treatment for lighter visual emphasis.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="badge-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="badge-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Badge" size="lg" title="Advanced Badge" description="A richer configuration demonstrating additional content and hierarchy." items="[{"id":"badge-2-1","key":"badge-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":"#badge-demo","actionHref":"#badge-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":"badge-2-2","key":"badge-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":"#badge-demo","actionHref":"#badge-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Badge" label="Attention" size="md" color="danger" variant="outline" shape="pill"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Outline badge usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Badge
|
<pre><code><Badge
|
||||||
size="lg"
|
label="Attention"
|
||||||
title="Advanced Badge"
|
color="danger"
|
||||||
description="A richer configuration demonstrating additional content and hierarchy."
|
variant="outline"
|
||||||
items='[
|
/></code></pre>
|
||||||
{
|
</section>
|
||||||
"id": "badge-2-1",
|
</div>
|
||||||
"key": "badge-2-1",
|
</article>
|
||||||
"value": "primary",
|
<article class="demo-case">
|
||||||
"label": "Advanced workflow",
|
<header class="demo-case-header">
|
||||||
"title": "Advanced workflow",
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>White badge</h2><p>Use a neutral surface with a subtle border and shadow.</p></div>
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
<span class="demo-case-number">04</span>
|
||||||
"text": "A configurable sample message.",
|
</header>
|
||||||
"href": "#badge-demo",
|
<div class="demo-workbench">
|
||||||
"actionHref": "#badge-demo",
|
<div id="badge-demo-4" class="demo-canvas demo-canvas--4">
|
||||||
"actionLabel": "Explore workflow",
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
"icon": "icon-[lucide--circle-check]",
|
<div class="demo-render"><div data-component="Badge" label="Neutral" size="md" color="dark" variant="white" shape="pill"></div></div>
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
</div>
|
||||||
"variant": "success",
|
<section class="demo-code" aria-label="White badge usage">
|
||||||
"status": "Complete",
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
"time": "11:45",
|
<pre><code><Badge
|
||||||
"current": true,
|
label="Neutral"
|
||||||
"selected": true,
|
color="dark"
|
||||||
"checked": true,
|
variant="white"
|
||||||
"disabled": false,
|
/></code></pre>
|
||||||
"outgoing": false,
|
</section>
|
||||||
"open": true,
|
</div>
|
||||||
"number": 1,
|
</article>
|
||||||
"count": 32,
|
<article class="demo-case">
|
||||||
"percentage": 91,
|
<header class="demo-case-header">
|
||||||
"color": "#059669",
|
<div><span class="demo-case-eyebrow">Shape</span><h2>Rounded badge</h2><p>Use softly rounded corners instead of fully pilled edges.</p></div>
|
||||||
"target": "_self",
|
<span class="demo-case-number">05</span>
|
||||||
"ariaLabel": "Open advanced workflow 1",
|
</header>
|
||||||
"items": [
|
<div class="demo-workbench">
|
||||||
{
|
<div id="badge-demo-5" class="demo-canvas demo-canvas--5">
|
||||||
"label": "Nested option A",
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
"value": "nested-a"
|
<div class="demo-render"><div data-component="Badge" label="Category" size="md" color="info" variant="solid" shape="rounded"></div></div>
|
||||||
},
|
</div>
|
||||||
{
|
<section class="demo-code" aria-label="Rounded badge usage">
|
||||||
"label": "Nested option B",
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
"value": "nested-b"
|
<pre><code><Badge
|
||||||
}
|
label="Category"
|
||||||
],
|
color="info"
|
||||||
"links": [
|
shape="rounded"
|
||||||
{
|
/></code></pre>
|
||||||
"label": "Documentation",
|
</section>
|
||||||
"href": "#documentation"
|
</div>
|
||||||
},
|
</article>
|
||||||
{
|
<article class="demo-case">
|
||||||
"label": "API reference",
|
<header class="demo-case-header">
|
||||||
"href": "#api-reference"
|
<div><span class="demo-case-eyebrow">Shape</span><h2>Pill badge</h2><p>Use a pill shape for compact labels and filter chips.</p></div>
|
||||||
}
|
<span class="demo-case-number">06</span>
|
||||||
],
|
</header>
|
||||||
"values": [
|
<div class="demo-workbench">
|
||||||
"Included",
|
<div id="badge-demo-6" class="demo-canvas demo-canvas--6">
|
||||||
"Unlimited"
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
]
|
<div class="demo-render"><div data-component="Badge" label="Pill badge" size="md" color="primary" variant="solid" shape="pill"></div></div>
|
||||||
},
|
</div>
|
||||||
{
|
<section class="demo-code" aria-label="Pill badge usage">
|
||||||
"id": "badge-2-2",
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
"key": "badge-2-2",
|
<pre><code><Badge
|
||||||
"value": "secondary",
|
label="Pill badge"
|
||||||
"label": "Additional option",
|
/></code></pre>
|
||||||
"title": "Supporting example",
|
</section>
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
</div>
|
||||||
"text": "Another configurable message.",
|
</article>
|
||||||
"href": "#badge-demo",
|
<article class="demo-case">
|
||||||
"actionHref": "#badge-demo",
|
<header class="demo-case-header">
|
||||||
"actionLabel": "Explore workflow",
|
<div><span class="demo-case-eyebrow">Content</span><h2>Truncated badge</h2><p>Constrain long badge text while preserving the full value in the API.</p></div>
|
||||||
"icon": "icon-[lucide--circle-check]",
|
<span class="demo-case-number">07</span>
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
</header>
|
||||||
"variant": "success",
|
<div class="demo-workbench">
|
||||||
"status": "Complete",
|
<div id="badge-demo-7" class="demo-canvas demo-canvas--7">
|
||||||
"time": "11:45",
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
"current": false,
|
<div class="demo-render"><div data-component="Badge" label="This content is a little too long for the available space" size="md" color="info" variant="solid" shape="rounded" truncate="true" maxWidth="10rem"></div></div>
|
||||||
"selected": false,
|
</div>
|
||||||
"checked": false,
|
<section class="demo-code" aria-label="Truncated badge usage">
|
||||||
"disabled": true,
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
"outgoing": true,
|
<pre><code><Badge
|
||||||
"open": true,
|
label="This content is a little too long for the available space"
|
||||||
"number": 2,
|
color="info"
|
||||||
"count": 64,
|
shape="rounded"
|
||||||
"percentage": 91,
|
truncate="true"
|
||||||
"color": "#059669",
|
maxWidth="10rem"
|
||||||
"target": "_self",
|
/></code></pre>
|
||||||
"ariaLabel": "Open advanced workflow 2",
|
</section>
|
||||||
"items": [
|
</div>
|
||||||
{
|
</article>
|
||||||
"label": "Nested option A",
|
<article class="demo-case">
|
||||||
"value": "nested-a"
|
<header class="demo-case-header">
|
||||||
},
|
<div><span class="demo-case-eyebrow">Status</span><h2>Badge with status dot</h2><p>Add a small dot to reinforce status at a glance.</p></div>
|
||||||
{
|
<span class="demo-case-number">08</span>
|
||||||
"label": "Nested option B",
|
</header>
|
||||||
"value": "nested-b"
|
<div class="demo-workbench">
|
||||||
}
|
<div id="badge-demo-8" class="demo-canvas demo-canvas--8">
|
||||||
],
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
"links": [
|
<div class="demo-render"><div data-component="Badge" label="Connected" size="md" color="success" variant="soft" shape="pill" dot="true"></div></div>
|
||||||
{
|
</div>
|
||||||
"label": "Documentation",
|
<section class="demo-code" aria-label="Badge with status dot usage">
|
||||||
"href": "#documentation"
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
},
|
<pre><code><Badge
|
||||||
{
|
label="Connected"
|
||||||
"label": "API reference",
|
color="success"
|
||||||
"href": "#api-reference"
|
variant="soft"
|
||||||
}
|
dot="true"
|
||||||
],
|
/></code></pre>
|
||||||
"values": [
|
</section>
|
||||||
"Included",
|
</div>
|
||||||
"Unlimited"
|
</article>
|
||||||
]
|
<article class="demo-case">
|
||||||
}
|
<header class="demo-case-header">
|
||||||
]'
|
<div><span class="demo-case-eyebrow">Content</span><h2>Badge with icon</h2><p>Pair an icon with text for states, metrics, or trend changes.</p></div>
|
||||||
variant="success"
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="badge-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"><div data-component="Badge" label="14.5%" size="md" color="success" variant="soft" shape="pill" icon="icon-[lucide--trending-up]"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Badge with icon usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Badge
|
||||||
|
label="14.5%"
|
||||||
|
color="success"
|
||||||
|
variant="soft"
|
||||||
|
icon="icon-[lucide--trending-up]"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Interaction</span><h2>Dismissible badge</h2><p>Provide a clear remove action for a selected chip.</p></div>
|
||||||
|
<span class="demo-case-number">010</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="badge-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"><div data-component="Badge" label="Design" size="md" color="info" variant="soft" shape="pill" dismissible="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Dismissible badge usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Badge
|
||||||
|
label="Design"
|
||||||
|
color="info"
|
||||||
|
variant="soft"
|
||||||
|
dismissible="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Content</span><h2>Badge with avatar</h2><p>Combine a profile image, label, and optional remove action.</p></div>
|
||||||
|
<span class="demo-case-number">011</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="badge-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"><div data-component="Badge" label="Christina" size="md" color="dark" variant="white" shape="pill" avatarSrc="/avatar-example-2.svg" avatarAlt="Christina" dismissible="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Badge with avatar usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Badge
|
||||||
|
label="Christina"
|
||||||
|
color="dark"
|
||||||
|
variant="white"
|
||||||
|
avatarSrc="/avatar-example-2.svg"
|
||||||
|
avatarAlt="Christina"
|
||||||
|
dismissible="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Composition</span><h2>Badge inside button</h2><p>Place a badge beside a button label to show a count.</p></div>
|
||||||
|
<span class="demo-case-number">012</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="badge-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"><div data-component="Badge" label="5" size="xs" color="danger" variant="solid" shape="pill" anchorLabel="Notifications" placement="inline" anchorLabelText="Open notifications"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Badge inside button usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Badge
|
||||||
|
label="5"
|
||||||
|
size="xs"
|
||||||
|
color="danger"
|
||||||
|
anchorLabel="Notifications"
|
||||||
|
anchorLabelText="Open notifications"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Composition</span><h2>Positioned badge</h2><p>Anchor a numeric badge to the corner of an icon button.</p></div>
|
||||||
|
<span class="demo-case-number">013</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="badge-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"><div data-component="Badge" label="99+" size="xs" color="danger" variant="solid" shape="pill" anchorIcon="icon-[lucide--bell]" placement="top-right" anchorLabelText="Open notifications"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Positioned badge usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Badge
|
||||||
|
label="99+"
|
||||||
|
size="xs"
|
||||||
|
color="danger"
|
||||||
|
anchorIcon="icon-[lucide--bell]"
|
||||||
|
placement="top-right"
|
||||||
|
anchorLabelText="Open notifications"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Composition</span><h2>Dot badge</h2><p>Use a small dot when a notification does not need a count.</p></div>
|
||||||
|
<span class="demo-case-number">014</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="badge-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"><div data-component="Badge" label="" size="md" color="success" variant="solid" shape="pill" dotOnly="true" dotLabel="New notification" anchorIcon="icon-[lucide--bell]" placement="top-right" anchorLabelText="Open notifications"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Dot badge usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Badge
|
||||||
|
color="success"
|
||||||
|
dotOnly="true"
|
||||||
|
dotLabel="New notification"
|
||||||
|
anchorIcon="icon-[lucide--bell]"
|
||||||
|
placement="top-right"
|
||||||
|
anchorLabelText="Open notifications"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Animation</span><h2>Ping badge</h2><p>Pulse a notification badge while respecting reduced-motion preferences.</p></div>
|
||||||
|
<span class="demo-case-number">015</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="badge-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"><div data-component="Badge" label="9+" size="md" color="danger" variant="solid" shape="pill" animated="true" anchorIcon="icon-[lucide--shopping-basket]" placement="top-right" anchorLabelText="Open cart"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Ping badge usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Badge
|
||||||
|
label="9+"
|
||||||
|
color="danger"
|
||||||
|
animated="true"
|
||||||
|
anchorIcon="icon-[lucide--shopping-basket]"
|
||||||
|
placement="top-right"
|
||||||
|
anchorLabelText="Open cart"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dismiss</code><span>Fires when the component emits the dismiss event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Badge"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('dismiss', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Badge"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"pill"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>dot</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotOnly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dotLabel</code></td><td>string</td><td><code>"Status"</code></td><td>No</td></tr><tr><td><code>animated</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>dismissLabel</code></td><td>string</td><td><code>"Remove badge"</code></td><td>No</td></tr><tr><td><code>truncate</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"12rem"</code></td><td>No</td></tr><tr><td><code>anchorLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>anchorIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>anchorLabelText</code></td><td>string</td><td><code>"Badge anchor"</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#badge-demo-1">Production default</a><a href="#badge-demo-2">Compact application</a><a href="#badge-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#badge-demo-1">Solid badge</a><a href="#badge-demo-2">Soft badge</a><a href="#badge-demo-3">Outline badge</a><a href="#badge-demo-4">White badge</a><a href="#badge-demo-5">Rounded badge</a><a href="#badge-demo-6">Pill badge</a><a href="#badge-demo-7">Truncated badge</a><a href="#badge-demo-8">Badge with status dot</a><a href="#badge-demo-9">Badge with icon</a><a href="#badge-demo-10">Dismissible badge</a><a href="#badge-demo-11">Badge with avatar</a><a href="#badge-demo-12">Badge inside button</a><a href="#badge-demo-13">Positioned badge</a><a href="#badge-demo-14">Dot badge</a><a href="#badge-demo-15">Ping badge</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -1,13 +1,19 @@
|
|||||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||||
page BlockquoteDetail {
|
page BlockquoteDetail {
|
||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_quote = ctx.url.searchParams.get("pg_quote") ?? "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
|
||||||
|
state playground_citation = ctx.url.searchParams.get("pg_citation") ?? ""
|
||||||
|
state playground_citationTitle = ctx.url.searchParams.get("pg_citationTitle") ?? ""
|
||||||
|
state playground_citationUrl = ctx.url.searchParams.get("pg_citationUrl") ?? ""
|
||||||
|
state playground_avatarSrc = ctx.url.searchParams.get("pg_avatarSrc") ?? ""
|
||||||
|
state playground_avatarAlt = ctx.url.searchParams.get("pg_avatarAlt") ?? ""
|
||||||
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Blockquote example"
|
state playground_align = ctx.url.searchParams.get("pg_align") ?? "left"
|
||||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default blockquote for a modern application."
|
|
||||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"blockquote-0-1\",\n \"key\": \"blockquote-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#blockquote-demo\",\n \"actionHref\": \"#blockquote-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"blockquote-0-2\",\n \"key\": \"blockquote-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#blockquote-demo\",\n \"actionHref\": \"#blockquote-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
|
||||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_quoteMark = ctx.url.searchParams.get("pg_quoteMark") ?? "true"
|
||||||
|
state playground_italic = ctx.url.searchParams.get("pg_italic") ?? "true"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Blockquote"
|
title = "Blockquote"
|
||||||
description = "Theme-aware, responsive blockquote component."
|
description = "Theme-aware, responsive blockquote component."
|
||||||
@@ -21,7 +27,7 @@ page BlockquoteDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Blockquote</h1>
|
<h1>Blockquote</h1>
|
||||||
<p>Theme-aware, responsive blockquote component.</p>
|
<p>Theme-aware, responsive blockquote component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>13 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -30,234 +36,16 @@ page BlockquoteDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Blockquote" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Blockquote" quote="{playground_quote}" citation="{playground_citation}" citationTitle="{playground_citationTitle}" citationUrl="{playground_citationUrl}" avatarSrc="{playground_avatarSrc}" avatarAlt="{playground_avatarAlt}" size="{playground_size}" color="{playground_color}" align="{playground_align}" variant="{playground_variant}" quoteMark="{playground_quoteMark}" italic="{playground_italic}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Blockquote
|
<pre><code data-playground-code><Blockquote /></code></pre>
|
||||||
title="Blockquote example"
|
|
||||||
description="A polished default blockquote for a modern application."
|
|
||||||
items='[
|
|
||||||
{
|
|
||||||
"id": "blockquote-0-1",
|
|
||||||
"key": "blockquote-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": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-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": "blockquote-0-2",
|
|
||||||
"key": "blockquote-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]'
|
|
||||||
/></code></pre>
|
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-blockquote-size"><span><strong>size</strong><small>string</small></span><select id="playground-blockquote-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-blockquote-color"><span><strong>color</strong><small>string</small></span><select id="playground-blockquote-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-blockquote-title"><span><strong>title</strong><small>string</small></span><input id="playground-blockquote-title" name="pg_title" type="text" value="Blockquote example" /></label><label class="playground-field" for="playground-blockquote-description"><span><strong>description</strong><small>string</small></span><input id="playground-blockquote-description" name="pg_description" type="text" value="A polished default blockquote for a modern application." /></label><label class="playground-field" for="playground-blockquote-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-blockquote-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-blockquote-quote"><span><strong>quote</strong><small>string</small></span><input id="playground-blockquote-quote" name="pg_quote" type="text" value="I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed." /></label><label class="playground-field" for="playground-blockquote-citation"><span><strong>citation</strong><small>string</small></span><input id="playground-blockquote-citation" name="pg_citation" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationTitle"><span><strong>citation Title</strong><small>string</small></span><input id="playground-blockquote-citationTitle" name="pg_citationTitle" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationUrl"><span><strong>citation Url</strong><small>string</small></span><input id="playground-blockquote-citationUrl" name="pg_citationUrl" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-blockquote-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-blockquote-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-size"><span><strong>size</strong><small>string</small></span><select id="playground-blockquote-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-blockquote-color"><span><strong>color</strong><small>string</small></span><select id="playground-blockquote-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-blockquote-align"><span><strong>align</strong><small>string</small></span><select id="playground-blockquote-align" name="pg_align"><option value="left" selected>left</option><option value="center">center</option><option value="right">right</option></select></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-blockquote-variant" name="pg_variant"><option value="default" selected>default</option><option value="bordered">bordered</option></select></label><label class="playground-toggle" for="playground-blockquote-quoteMark"><span><strong>quote Mark</strong><small>boolean</small></span><input id="playground-blockquote-quoteMark" name="pg_quoteMark" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-blockquote-italic"><span><strong>italic</strong><small>boolean</small></span><input id="playground-blockquote-italic" name="pg_italic" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-blockquote-class"><span><strong>class</strong><small>string</small></span><input id="playground-blockquote-class" name="pg_class" type="text" value="" /></label></div>
|
||||||
{
|
|
||||||
"id": "blockquote-0-1",
|
|
||||||
"key": "blockquote-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": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-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": "blockquote-0-2",
|
|
||||||
"key": "blockquote-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-blockquote-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-blockquote-class"><span><strong>class</strong><small>string</small></span><input id="playground-blockquote-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -272,122 +60,11 @@ page BlockquoteDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="blockquote-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="blockquote-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Blockquote" size="default" title="Blockquote example" description="A polished default blockquote for a modern application." items="[{"id":"blockquote-0-1","key":"blockquote-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":"#blockquote-demo","actionHref":"#blockquote-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":"blockquote-0-2","key":"blockquote-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#blockquote-demo","actionHref":"#blockquote-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Blockquote" quote="I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed." size="md" color="primary" align="left" variant="default" quoteMark="true" italic="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Production default usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Blockquote
|
<pre><code><Blockquote /></code></pre>
|
||||||
title="Blockquote example"
|
|
||||||
description="A polished default blockquote for a modern application."
|
|
||||||
items='[
|
|
||||||
{
|
|
||||||
"id": "blockquote-0-1",
|
|
||||||
"key": "blockquote-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": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-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": "blockquote-0-2",
|
|
||||||
"key": "blockquote-0-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]'
|
|
||||||
/></code></pre>
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
@@ -399,123 +76,17 @@ page BlockquoteDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="blockquote-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="blockquote-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Blockquote" size="sm" title="Compact Blockquote" description="A compact configuration for dashboards and dense product surfaces." items="[{"id":"blockquote-1-1","key":"blockquote-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":"#blockquote-demo","actionHref":"#blockquote-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":"blockquote-1-2","key":"blockquote-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#blockquote-demo","actionHref":"#blockquote-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Blockquote" quote="Good design makes the complex understandable and the useful feel effortless." citation="Josh Grazioso" citationTitle="Product designer" size="sm" color="info" align="center" variant="default" quoteMark="true" italic="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Compact application usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Blockquote
|
<pre><code><Blockquote
|
||||||
|
quote="Good design makes the complex understandable and the useful feel effortless."
|
||||||
|
citation="Josh Grazioso"
|
||||||
|
citationTitle="Product designer"
|
||||||
size="sm"
|
size="sm"
|
||||||
title="Compact Blockquote"
|
color="info"
|
||||||
description="A compact configuration for dashboards and dense product surfaces."
|
align="center"
|
||||||
items='[
|
|
||||||
{
|
|
||||||
"id": "blockquote-1-1",
|
|
||||||
"key": "blockquote-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": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-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": "blockquote-1-2",
|
|
||||||
"key": "blockquote-1-2",
|
|
||||||
"value": "secondary",
|
|
||||||
"label": "Additional option",
|
|
||||||
"title": "Supporting example",
|
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-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"
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -528,132 +99,30 @@ page BlockquoteDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="blockquote-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="blockquote-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Blockquote" size="lg" title="Advanced Blockquote" description="A richer configuration demonstrating additional content and hierarchy." items="[{"id":"blockquote-2-1","key":"blockquote-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":"#blockquote-demo","actionHref":"#blockquote-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":"blockquote-2-2","key":"blockquote-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":"#blockquote-demo","actionHref":"#blockquote-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Blockquote" quote="The strongest product experiences are built when clarity, craft, and empathy reinforce one another." citation="Josh Grazioso" citationTitle="Source title" citationUrl="#blockquote-demo" avatarSrc="/avatar-example.svg" avatarAlt="Josh Grazioso" size="lg" color="success" align="left" variant="bordered" quoteMark="false" italic="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Rich configuration usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Blockquote
|
<pre><code><Blockquote
|
||||||
|
quote="The strongest product experiences are built when clarity, craft, and empathy reinforce one another."
|
||||||
|
citation="Josh Grazioso"
|
||||||
|
citationTitle="Source title"
|
||||||
|
citationUrl="#blockquote-demo"
|
||||||
|
avatarSrc="/avatar-example.svg"
|
||||||
|
avatarAlt="Josh Grazioso"
|
||||||
size="lg"
|
size="lg"
|
||||||
title="Advanced Blockquote"
|
color="success"
|
||||||
description="A richer configuration demonstrating additional content and hierarchy."
|
variant="bordered"
|
||||||
items='[
|
quoteMark="false"
|
||||||
{
|
|
||||||
"id": "blockquote-2-1",
|
|
||||||
"key": "blockquote-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": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-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": "blockquote-2-2",
|
|
||||||
"key": "blockquote-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": "#blockquote-demo",
|
|
||||||
"actionHref": "#blockquote-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"
|
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Blockquote"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#blockquote-demo-1">Production default</a><a href="#blockquote-demo-2">Compact application</a><a href="#blockquote-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#blockquote-demo-1">Production default</a><a href="#blockquote-demo-2">Compact application</a><a href="#blockquote-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page BreadcrumbDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Breadcrumb</h1>
|
<h1>Breadcrumb</h1>
|
||||||
<p>Theme-aware, responsive breadcrumb component.</p>
|
<p>Theme-aware, responsive breadcrumb component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page BreadcrumbDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "breadcrumb-0-1",
|
"id": "breadcrumb-0-1",
|
||||||
"key": "breadcrumb-0-1",
|
"key": "breadcrumb-0-1",
|
||||||
@@ -641,11 +641,15 @@ page BreadcrumbDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@navigate</code><span>Fires when the component emits the navigate event.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('navigate', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#breadcrumb-demo-1">Production default</a><a href="#breadcrumb-demo-2">Compact application</a><a href="#breadcrumb-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#breadcrumb-demo-1">Production default</a><a href="#breadcrumb-demo-2">Compact application</a><a href="#breadcrumb-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -1,13 +1,19 @@
|
|||||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||||
page ButtonGroupDetail {
|
page ButtonGroupDetail {
|
||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"label\": \"Profile\",\n \"value\": \"profile\"\n },\n {\n \"label\": \"Settings\",\n \"value\": \"settings\"\n },\n {\n \"label\": \"Messages\",\n \"value\": \"messages\"\n }\n]"
|
||||||
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? "profile"
|
||||||
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Button Group example"
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "outline"
|
||||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default button group for a modern application."
|
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"button-group-0-1\",\n \"key\": \"button-group-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#button-group-demo\",\n \"actionHref\": \"#button-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"button-group-0-2\",\n \"key\": \"button-group-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#button-group-demo\",\n \"actionHref\": \"#button-group-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
state playground_responsive = ctx.url.searchParams.get("pg_responsive") ?? "false"
|
||||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
state playground_attached = ctx.url.searchParams.get("pg_attached") ?? "true"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_selectable = ctx.url.searchParams.get("pg_selectable") ?? "true"
|
||||||
|
state playground_toolbar = ctx.url.searchParams.get("pg_toolbar") ?? "false"
|
||||||
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
|
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button group"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Button Group"
|
title = "Button Group"
|
||||||
description = "Theme-aware, responsive button group component."
|
description = "Theme-aware, responsive button group component."
|
||||||
@@ -21,7 +27,7 @@ page ButtonGroupDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Button Group</h1>
|
<h1>Button Group</h1>
|
||||||
<p>Theme-aware, responsive button group component.</p>
|
<p>Theme-aware, responsive button group component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>13 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -30,234 +36,47 @@ page ButtonGroupDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="ButtonGroup" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="ButtonGroup" items="{playground_items}" value="{playground_value}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" orientation="{playground_orientation}" responsive="{playground_responsive}" attached="{playground_attached}" selectable="{playground_selectable}" toolbar="{playground_toolbar}" disabled="{playground_disabled}" ariaLabel="{playground_ariaLabel}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><ButtonGroup
|
<pre><code data-playground-code><ButtonGroup
|
||||||
title="Button Group example"
|
|
||||||
description="A polished default button group for a modern application."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "button-group-0-1",
|
"label": "Profile",
|
||||||
"key": "button-group-0-1",
|
"value": "profile"
|
||||||
"value": "primary",
|
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "button-group-0-2",
|
"label": "Settings",
|
||||||
"key": "button-group-0-2",
|
"value": "settings"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Messages",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"value": "messages"
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
value="profile"
|
||||||
|
variant="outline"
|
||||||
|
selectable="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-button-group-title" name="pg_title" type="text" value="Button Group example" /></label><label class="playground-field" for="playground-button-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-group-description" name="pg_description" type="text" value="A polished default button group for a modern application." /></label><label class="playground-field" for="playground-button-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-button-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "button-group-0-1",
|
"label": "Profile",
|
||||||
"key": "button-group-0-1",
|
"value": "profile"
|
||||||
"value": "primary",
|
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "button-group-0-2",
|
"label": "Settings",
|
||||||
"key": "button-group-0-2",
|
"value": "settings"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Messages",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"value": "messages"
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-button-group-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="profile" /></label><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-group-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-button-group-variant" name="pg_variant"><option value="outline" selected>outline</option><option value="default">default</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-button-group-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-button-group-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-button-group-responsive"><span><strong>responsive</strong><small>boolean</small></span><input id="playground-button-group-responsive" name="pg_responsive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-attached"><span><strong>attached</strong><small>boolean</small></span><input id="playground-button-group-attached" name="pg_attached" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-button-group-selectable" name="pg_selectable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-button-group-toolbar" name="pg_toolbar" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-group-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-group-ariaLabel" name="pg_ariaLabel" type="text" value="Button group" /></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -266,394 +85,250 @@ page ButtonGroupDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Example</h2><p>Group related actions into one compact, visually connected control.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="button-group-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="button-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ButtonGroup" size="default" title="Button Group example" description="A polished default button group for a modern application." items="[{"id":"button-group-0-1","key":"button-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-0-2","key":"button-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="ButtonGroup" items="[{"label":"Profile","value":"profile"},{"label":"Settings","value":"settings"},{"label":"Messages","value":"messages"}]" value="profile" size="md" color="primary" variant="outline" orientation="horizontal" attached="true" selectable="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Example usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ButtonGroup
|
<pre><code><ButtonGroup
|
||||||
title="Button Group example"
|
|
||||||
description="A polished default button group for a modern application."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "button-group-0-1",
|
"label": "Profile",
|
||||||
"key": "button-group-0-1",
|
"value": "profile"
|
||||||
"value": "primary",
|
|
||||||
"label": "Primary workflow",
|
|
||||||
"title": "Primary workflow",
|
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "button-group-0-2",
|
"label": "Settings",
|
||||||
"key": "button-group-0-2",
|
"value": "settings"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Messages",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"value": "messages"
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
value="profile"
|
||||||
|
variant="outline"
|
||||||
|
selectable="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Sizes</span><h2>Small</h2><p>Use small grouped buttons in dense toolbars, tables, and utility surfaces.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="button-group-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="button-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ButtonGroup" size="sm" title="Compact Button Group" description="A compact configuration for dashboards and dense product surfaces." items="[{"id":"button-group-1-1","key":"button-group-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-1-2","key":"button-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="ButtonGroup" items="[{"label":"Profile","value":"profile"},{"label":"Settings","value":"settings"},{"label":"Messages","value":"messages"}]" size="sm" color="primary" variant="outline" orientation="horizontal" attached="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Small usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ButtonGroup
|
<pre><code><ButtonGroup
|
||||||
size="sm"
|
|
||||||
title="Compact Button Group"
|
|
||||||
description="A compact configuration for dashboards and dense product surfaces."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "button-group-1-1",
|
"label": "Profile",
|
||||||
"key": "button-group-1-1",
|
"value": "profile"
|
||||||
"value": "primary",
|
|
||||||
"label": "Secondary workflow",
|
|
||||||
"title": "Secondary workflow",
|
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--zap]",
|
|
||||||
"iconClass": "icon-[lucide--zap]",
|
|
||||||
"variant": "secondary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "10:15",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 24,
|
|
||||||
"percentage": 48,
|
|
||||||
"color": "#0284c7",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open secondary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "button-group-1-2",
|
"label": "Settings",
|
||||||
"key": "button-group-1-2",
|
"value": "settings"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Messages",
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
"value": "messages"
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--zap]",
|
|
||||||
"iconClass": "icon-[lucide--zap]",
|
|
||||||
"variant": "secondary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "10:15",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 48,
|
|
||||||
"percentage": 48,
|
|
||||||
"color": "#0284c7",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open secondary workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
variant="secondary"
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Sizes</span><h2>Medium</h2><p>Use the balanced medium size for most product interfaces.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="button-group-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="button-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ButtonGroup" size="lg" title="Advanced Button Group" description="A richer configuration demonstrating additional content and hierarchy." items="[{"id":"button-group-2-1","key":"button-group-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"button-group-2-2","key":"button-group-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="ButtonGroup" items="[{"label":"Profile","value":"profile"},{"label":"Settings","value":"settings"},{"label":"Messages","value":"messages"}]" size="md" color="primary" variant="outline" orientation="horizontal" attached="true"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Medium usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ButtonGroup
|
<pre><code><ButtonGroup
|
||||||
size="lg"
|
|
||||||
title="Advanced Button Group"
|
|
||||||
description="A richer configuration demonstrating additional content and hierarchy."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "button-group-2-1",
|
"label": "Profile",
|
||||||
"key": "button-group-2-1",
|
"value": "profile"
|
||||||
"value": "primary",
|
|
||||||
"label": "Advanced workflow",
|
|
||||||
"title": "Advanced workflow",
|
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
|
||||||
"text": "A configurable sample message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "Explore workflow",
|
|
||||||
"icon": "icon-[lucide--circle-check]",
|
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
|
||||||
"variant": "success",
|
|
||||||
"status": "Complete",
|
|
||||||
"time": "11:45",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 32,
|
|
||||||
"percentage": 91,
|
|
||||||
"color": "#059669",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open advanced workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Unlimited"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "button-group-2-2",
|
"label": "Settings",
|
||||||
"key": "button-group-2-2",
|
"value": "settings"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Messages",
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
"value": "messages"
|
||||||
"text": "Another configurable message.",
|
|
||||||
"href": "#button-group-demo",
|
|
||||||
"actionHref": "#button-group-demo",
|
|
||||||
"actionLabel": "Explore workflow",
|
|
||||||
"icon": "icon-[lucide--circle-check]",
|
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
|
||||||
"variant": "success",
|
|
||||||
"status": "Complete",
|
|
||||||
"time": "11:45",
|
|
||||||
"current": false,
|
|
||||||
"selected": false,
|
|
||||||
"checked": false,
|
|
||||||
"disabled": true,
|
|
||||||
"outgoing": true,
|
|
||||||
"open": true,
|
|
||||||
"number": 2,
|
|
||||||
"count": 64,
|
|
||||||
"percentage": 91,
|
|
||||||
"color": "#059669",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open advanced workflow 2",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Unlimited"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
variant="success"
|
variant="outline"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Sizes</span><h2>Large</h2><p>Use large grouped buttons for prominent actions and touch-focused layouts.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="button-group-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"><div data-component="ButtonGroup" items="[{"label":"Profile","value":"profile"},{"label":"Settings","value":"settings"},{"label":"Messages","value":"messages"}]" size="lg" color="primary" variant="outline" orientation="horizontal" attached="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Large usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ButtonGroup
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"label": "Profile",
|
||||||
|
"value": "profile"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Settings",
|
||||||
|
"value": "settings"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Messages",
|
||||||
|
"value": "messages"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Responsive stack</span><h2>Responsive stack</h2><p>Keep actions inline on larger screens and stack them on narrow viewports.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="button-group-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"><div data-component="ButtonGroup" items="[{"label":"Save draft","value":"draft"},{"label":"Preview","value":"preview"},{"label":"Publish","value":"publish"}]" size="md" color="primary" variant="outline" orientation="horizontal" responsive="true" attached="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Responsive stack usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ButtonGroup
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"label": "Save draft",
|
||||||
|
"value": "draft"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Preview",
|
||||||
|
"value": "preview"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Publish",
|
||||||
|
"value": "publish"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
variant="outline"
|
||||||
|
responsive="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Orientation</span><h2>Vertical stack</h2><p>Stack connected actions vertically while preserving joined borders.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="button-group-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"><div data-component="ButtonGroup" items="[{"label":"Account","value":"account"},{"label":"Security","value":"security"},{"label":"Notifications","value":"notifications"}]" size="md" color="primary" variant="outline" orientation="vertical" attached="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Vertical stack usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ButtonGroup
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"label": "Account",
|
||||||
|
"value": "account"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Security",
|
||||||
|
"value": "security"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Notifications",
|
||||||
|
"value": "notifications"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
variant="outline"
|
||||||
|
orientation="vertical"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Toolbar</span><h2>Button toolbar</h2><p>Expose a labeled toolbar with selectable formatting actions.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="button-group-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"><div data-component="ButtonGroup" items="[{"label":"Bold","value":"bold","icon":"icon-[lucide--bold]"},{"label":"Italic","value":"italic","icon":"icon-[lucide--italic]"},{"label":"Underline","value":"underline","icon":"icon-[lucide--underline]"}]" value="bold" size="md" color="primary" variant="outline" orientation="horizontal" attached="true" selectable="true" toolbar="true" ariaLabel="Text formatting"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Button toolbar usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ButtonGroup
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"label": "Bold",
|
||||||
|
"value": "bold",
|
||||||
|
"icon": "icon-[lucide--bold]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Italic",
|
||||||
|
"value": "italic",
|
||||||
|
"icon": "icon-[lucide--italic]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Underline",
|
||||||
|
"value": "underline",
|
||||||
|
"icon": "icon-[lucide--underline]"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
value="bold"
|
||||||
|
variant="outline"
|
||||||
|
selectable="true"
|
||||||
|
toolbar="true"
|
||||||
|
ariaLabel="Text formatting"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<section id="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>"Button Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('click', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>responsive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>attached</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>toolbar</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>ariaLabel</code></td><td>string</td><td><code>"Button group"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-group-demo-1">Production default</a><a href="#button-group-demo-2">Compact application</a><a href="#button-group-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><span class="detail-toc-group">Basic usage</span><a href="#button-group-demo-1">Example</a><span class="detail-toc-group">Sizes</span><a href="#button-group-demo-2">Small</a><a href="#button-group-demo-3">Medium</a><a href="#button-group-demo-4">Large</a><a href="#button-group-demo-5">Responsive stack</a><a href="#button-group-demo-6">Vertical stack</a><a href="#button-group-demo-7">Button toolbar</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ page ButtonDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Button</h1>
|
<h1>Button</h1>
|
||||||
<p>Theme-aware, responsive button component.</p>
|
<p>Theme-aware, responsive button component.</p>
|
||||||
<div class="detail-badges"><span>25 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>25 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -61,7 +61,7 @@ page ButtonDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-button-label"><span><strong>label</strong><small>string</small></span><input id="playground-button-label" name="pg_label" type="text" value="Save & Submit" /></label><label class="playground-field" for="playground-button-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-button-loadingLabel" name="pg_loadingLabel" type="text" value="Loading…" /></label><label class="playground-field" for="playground-button-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-button-as"><span><strong>as</strong><small>string</small></span><select id="playground-button-as" name="pg_as"><option value="button" selected>button</option><option value="">Auto / default</option><option value="a">a</option></select></label><label class="playground-field" for="playground-button-href"><span><strong>href</strong><small>string</small></span><input id="playground-button-href" name="pg_href" type="text" value="" /></label><label class="playground-field" for="playground-button-target"><span><strong>target</strong><small>string</small></span><select id="playground-button-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-button-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-button-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-button-type"><span><strong>type</strong><small>string</small></span><select id="playground-button-type" name="pg_type"><option value="submit" selected>submit</option><option value="button">button</option><option value="reset">reset</option></select></label><label class="playground-field" for="playground-button-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-button-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-button-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-toggle" for="playground-button-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-button-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-pill"><span><strong>pill</strong><small>boolean</small></span><input id="playground-button-pill" name="pg_pill" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-button-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-button-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-button-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-button-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end<Line truncated
|
<div class="playground-fields"><label class="playground-field" for="playground-button-label"><span><strong>label</strong><small>string</small></span><input id="playground-button-label" name="pg_label" type="text" value="Save & Submit" /></label><label class="playground-field" for="playground-button-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-button-loadingLabel" name="pg_loadingLabel" type="text" value="Loading…" /></label><label class="playground-field" for="playground-button-description"><span><strong>description</strong><small>string</small></span><input id="playground-button-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-button-as"><span><strong>as</strong><small>string</small></span><select id="playground-button-as" name="pg_as"><option value="button" selected>button</option><option value="">Auto / default</option><option value="a">a</option></select></label><label class="playground-field" for="playground-button-href"><span><strong>href</strong><small>string</small></span><input id="playground-button-href" name="pg_href" type="text" value="" /></label><label class="playground-field" for="playground-button-target"><span><strong>target</strong><small>string</small></span><select id="playground-button-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-button-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-button-rel" name="pg_rel" type="text" value="" /></label><label class="playground-field" for="playground-button-type"><span><strong>type</strong><small>string</small></span><select id="playground-button-type" name="pg_type"><option value="submit" selected>submit</option><option value="button">button</option><option value="reset">reset</option></select></label><label class="playground-field" for="playground-button-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-button-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-button-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-toggle" for="playground-button-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-button-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-pill"><span><strong>pill</strong><small>boolean</small></span><input id="playground-button-pill" name="pg_pill" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-button-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-button-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-button-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-button-iconPosition" name="pg_iconPosition"><option vLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -241,11 +241,15 @@ page ButtonDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('click', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Button"</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading…"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>as</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>pill</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaPressed</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaExpanded</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaControls</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>autofocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controlClass</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Button"</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading…"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>as</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>pill</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaPressed</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaExpanded</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>ariaControls</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>autofocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>controlClass</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-demo-1">Primary action</a><a href="#button-demo-2">Secondary navigation</a><a href="#button-demo-3">Prominent rounded action</a><a href="#button-demo-4">Accessible icon action</a><a href="#button-demo-5">Dangerous action</a><a href="#button-demo-6">Inline action</a><a href="#button-demo-7">Pending action</a><a href="#button-demo-8">Unavailable action</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-demo-1">Primary action</a><a href="#button-demo-2">Secondary navigation</a><a href="#button-demo-3">Prominent rounded action</a><a href="#button-demo-4">Accessible icon action</a><a href="#button-demo-5">Dangerous action</a><a href="#button-demo-6">Inline action</a><a href="#button-demo-7">Pending action</a><a href="#button-demo-8">Unavailable action</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
+555
-565
File diff suppressed because it is too large.
Load diff
+700
-542
File diff suppressed because it is too large.
Load diff
@@ -21,7 +21,7 @@ page ChartDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Chart</h1>
|
<h1>Chart</h1>
|
||||||
<p>Theme-aware, responsive chart component.</p>
|
<p>Theme-aware, responsive chart component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page ChartDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-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="lg">lg</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-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Chart example" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="A polished default chart for a modern application." /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-chart-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-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Chart example" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="A polished default chart for a modern application." /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "chart-0-1",
|
"id": "chart-0-1",
|
||||||
"key": "chart-0-1",
|
"key": "chart-0-1",
|
||||||
@@ -649,11 +649,15 @@ page ChartDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@dataPointClick</code><span>Fires when the component emits the data Point Click event.</span></div><div><code>@legendToggle</code><span>Fires when the component emits the legend Toggle event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('select', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"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>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Production default</a><a href="#chart-demo-2">Compact application</a><a href="#chart-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chart-demo-1">Production default</a><a href="#chart-demo-2">Compact application</a><a href="#chart-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,11 +3,15 @@ page ChatBubbleDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chat Bubble example"
|
state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
|
||||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chat bubble for a modern application."
|
state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
|
||||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"chat-bubble-0-1\",\n \"key\": \"chat-bubble-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#chat-bubble-demo\",\n \"actionHref\": \"#chat-bubble-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"chat-bubble-0-2\",\n \"key\": \"chat-bubble-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#chat-bubble-demo\",\n \"actionHref\": \"#chat-bubble-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"question\",\n \"direction\": \"incoming\",\n \"author\": \"Support agent\",\n \"title\": \"How can we help?\",\n \"text\": \"You can ask questions like:\",\n \"bullets\": [\n \"What's WireJS UI?\",\n \"How many component examples are there?\",\n \"Is there a PRO version?\"\n ]\n },\n {\n \"id\": \"request\",\n \"direction\": \"outgoing\",\n \"author\": \"AZ\",\n \"text\": \"what's wirejs ui?\"\n },\n {\n \"id\": \"answer\",\n \"direction\": \"incoming\",\n \"author\": \"Support agent\",\n \"text\": \"WireJS UI is an open-source set of reusable UI components built for responsive applications.\",\n \"links\": [\n {\n \"label\": \"Installation guide\",\n \"href\": \"/installation\"\n },\n {\n \"label\": \"Framework guides\",\n \"href\": \"/framework-guides\"\n }\n ]\n }\n]"
|
||||||
|
state playground_oneSided = ctx.url.searchParams.get("pg_oneSided") ?? "false"
|
||||||
|
state playground_showAvatars = ctx.url.searchParams.get("pg_showAvatars") ?? "false"
|
||||||
|
state playground_showMetadata = ctx.url.searchParams.get("pg_showMetadata") ?? "false"
|
||||||
|
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Conversation"
|
||||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Chat Bubble"
|
title = "Chat Bubble"
|
||||||
description = "Theme-aware, responsive chat bubble component."
|
description = "Theme-aware, responsive chat bubble component."
|
||||||
@@ -21,7 +25,7 @@ page ChatBubbleDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Chat Bubble</h1>
|
<h1>Chat Bubble</h1>
|
||||||
<p>Theme-aware, responsive chat bubble component.</p>
|
<p>Theme-aware, responsive chat bubble component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>11 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -30,117 +34,43 @@ page ChatBubbleDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="ChatBubble" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="ChatBubble" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" oneSided="{playground_oneSided}" showAvatars="{playground_showAvatars}" showMetadata="{playground_showMetadata}" ariaLabel="{playground_ariaLabel}" variant="{playground_variant}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><ChatBubble
|
<pre><code data-playground-code><ChatBubble
|
||||||
title="Chat Bubble example"
|
|
||||||
description="A polished default chat bubble for a modern application."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-0-1",
|
"id": "question",
|
||||||
"key": "chat-bubble-0-1",
|
"direction": "incoming",
|
||||||
"value": "primary",
|
"author": "Support agent",
|
||||||
"label": "Primary workflow",
|
"title": "How can we help?",
|
||||||
"title": "Primary workflow",
|
"text": "You can ask questions like:",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"bullets": [
|
||||||
"text": "A configurable sample message.",
|
"What\'s WireJS UI?",
|
||||||
"href": "#chat-bubble-demo",
|
"How many component examples are there?",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"Is there a PRO version?"
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-0-2",
|
"id": "request",
|
||||||
"key": "chat-bubble-0-2",
|
"direction": "outgoing",
|
||||||
"value": "secondary",
|
"author": "AZ",
|
||||||
"label": "Additional option",
|
"text": "what\'s wirejs ui?"
|
||||||
"title": "Supporting example",
|
},
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
{
|
||||||
"text": "Another configurable message.",
|
"id": "answer",
|
||||||
"href": "#chat-bubble-demo",
|
"direction": "incoming",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"author": "Support agent",
|
||||||
"actionLabel": "View details",
|
"text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
|
||||||
"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": [
|
"links": [
|
||||||
{
|
{
|
||||||
"label": "Documentation",
|
"label": "Installation guide",
|
||||||
"href": "#documentation"
|
"href": "/installation"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "API reference",
|
"label": "Framework guides",
|
||||||
"href": "#api-reference"
|
"href": "/framework-guides"
|
||||||
}
|
}
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
@@ -149,115 +79,43 @@ page ChatBubbleDetail {
|
|||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="Chat Bubble example" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="A polished default chat bubble for a modern application." /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-0-1",
|
"id": "question",
|
||||||
"key": "chat-bubble-0-1",
|
"direction": "incoming",
|
||||||
"value": "primary",
|
"author": "Support agent",
|
||||||
"label": "Primary workflow",
|
"title": "How can we help?",
|
||||||
"title": "Primary workflow",
|
"text": "You can ask questions like:",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"bullets": [
|
||||||
"text": "A configurable sample message.",
|
"What's WireJS UI?",
|
||||||
"href": "#chat-bubble-demo",
|
"How many component examples are there?",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"Is there a PRO version?"
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-0-2",
|
"id": "request",
|
||||||
"key": "chat-bubble-0-2",
|
"direction": "outgoing",
|
||||||
"value": "secondary",
|
"author": "AZ",
|
||||||
"label": "Additional option",
|
"text": "what's wirejs ui?"
|
||||||
"title": "Supporting example",
|
},
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
{
|
||||||
"text": "Another configurable message.",
|
"id": "answer",
|
||||||
"href": "#chat-bubble-demo",
|
"direction": "incoming",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"author": "Support agent",
|
||||||
"actionLabel": "View details",
|
"text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
|
||||||
"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": [
|
"links": [
|
||||||
{
|
{
|
||||||
"label": "Documentation",
|
"label": "Installation guide",
|
||||||
"href": "#documentation"
|
"href": "/installation"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "API reference",
|
"label": "Framework guides",
|
||||||
"href": "#api-reference"
|
"href": "/framework-guides"
|
||||||
}
|
}
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-chat-bubble-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Conversation" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-chat-bubble-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -266,124 +124,50 @@ page ChatBubbleDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Conversation</h2><p>Show a basic two-sided conversation with incoming and outgoing messages.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ChatBubble" size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items="[{"id":"chat-bubble-0-1","key":"chat-bubble-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{"id":"question","direction":"incoming","author":"Support agent","title":"How can we help?","text":"You can ask questions like:","bullets":["What's WireJS UI?","How many component examples are there?","Is there a PRO version?"]},{"id":"request","direction":"outgoing","author":"AZ","text":"what's wirejs ui?"},{"id":"answer","direction":"incoming","author":"Support agent","text":"WireJS UI is an open-source set of reusable UI components built for responsive applications.","links":[{"label":"Installation guide","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]}]" oneSided="false" showAvatars="false" showMetadata="false" ariaLabel="Conversation"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Conversation usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ChatBubble
|
<pre><code><ChatBubble
|
||||||
title="Chat Bubble example"
|
|
||||||
description="A polished default chat bubble for a modern application."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-0-1",
|
"id": "question",
|
||||||
"key": "chat-bubble-0-1",
|
"direction": "incoming",
|
||||||
"value": "primary",
|
"author": "Support agent",
|
||||||
"label": "Primary workflow",
|
"title": "How can we help?",
|
||||||
"title": "Primary workflow",
|
"text": "You can ask questions like:",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"bullets": [
|
||||||
"text": "A configurable sample message.",
|
"What\'s WireJS UI?",
|
||||||
"href": "#chat-bubble-demo",
|
"How many component examples are there?",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"Is there a PRO version?"
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--sparkles]",
|
|
||||||
"iconClass": "icon-[lucide--sparkles]",
|
|
||||||
"variant": "primary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "09:30",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 16,
|
|
||||||
"percentage": 72,
|
|
||||||
"color": "#7c3aed",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open primary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-0-2",
|
"id": "request",
|
||||||
"key": "chat-bubble-0-2",
|
"direction": "outgoing",
|
||||||
"value": "secondary",
|
"author": "AZ",
|
||||||
"label": "Additional option",
|
"text": "what\'s wirejs ui?"
|
||||||
"title": "Supporting example",
|
},
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
{
|
||||||
"text": "Another configurable message.",
|
"id": "answer",
|
||||||
"href": "#chat-bubble-demo",
|
"direction": "incoming",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"author": "Support agent",
|
||||||
"actionLabel": "View details",
|
"text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
|
||||||
"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": [
|
"links": [
|
||||||
{
|
{
|
||||||
"label": "Documentation",
|
"label": "Installation guide",
|
||||||
"href": "#documentation"
|
"href": "/installation"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "API reference",
|
"label": "Framework guides",
|
||||||
"href": "#api-reference"
|
"href": "/framework-guides"
|
||||||
}
|
}
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
@@ -393,267 +177,208 @@ page ChatBubbleDetail {
|
|||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Layout</span><h2>One-sided</h2><p>Use one-sided bubbles for support transcripts or single-direction message feeds.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ChatBubble" size="sm" title="Compact Chat Bubble" description="A compact configuration for dashboards and dense product surfaces." items="[{"id":"chat-bubble-1-1","key":"chat-bubble-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-1-2","key":"chat-bubble-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{"id":"question","direction":"incoming","author":"Support agent","title":"How can we help?","text":"You can ask questions like:","bullets":["What's WireJS UI?","How many component examples are there?","Is there a PRO version?"]},{"id":"request","direction":"outgoing","author":"AZ","text":"what's wirejs ui?"},{"id":"answer","direction":"incoming","author":"Support agent","text":"WireJS UI is an open-source set of reusable UI components built for responsive applications.","links":[{"label":"Installation guide","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]}]" oneSided="true" showAvatars="false" showMetadata="false" ariaLabel="One-sided"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="One-sided usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ChatBubble
|
<pre><code><ChatBubble
|
||||||
size="sm"
|
|
||||||
title="Compact Chat Bubble"
|
|
||||||
description="A compact configuration for dashboards and dense product surfaces."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-1-1",
|
"id": "question",
|
||||||
"key": "chat-bubble-1-1",
|
"direction": "incoming",
|
||||||
"value": "primary",
|
"author": "Support agent",
|
||||||
"label": "Secondary workflow",
|
"title": "How can we help?",
|
||||||
"title": "Secondary workflow",
|
"text": "You can ask questions like:",
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
"bullets": [
|
||||||
"text": "A configurable sample message.",
|
"What\'s WireJS UI?",
|
||||||
"href": "#chat-bubble-demo",
|
"How many component examples are there?",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"Is there a PRO version?"
|
||||||
"actionLabel": "View details",
|
|
||||||
"icon": "icon-[lucide--zap]",
|
|
||||||
"iconClass": "icon-[lucide--zap]",
|
|
||||||
"variant": "secondary",
|
|
||||||
"status": "Active",
|
|
||||||
"time": "10:15",
|
|
||||||
"current": true,
|
|
||||||
"selected": true,
|
|
||||||
"checked": true,
|
|
||||||
"disabled": false,
|
|
||||||
"outgoing": false,
|
|
||||||
"open": true,
|
|
||||||
"number": 1,
|
|
||||||
"count": 24,
|
|
||||||
"percentage": 48,
|
|
||||||
"color": "#0284c7",
|
|
||||||
"target": "_self",
|
|
||||||
"ariaLabel": "Open secondary workflow 1",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"label": "Nested option A",
|
|
||||||
"value": "nested-a"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "Nested option B",
|
|
||||||
"value": "nested-b"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"links": [
|
|
||||||
{
|
|
||||||
"label": "Documentation",
|
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-1-2",
|
"id": "request",
|
||||||
"key": "chat-bubble-1-2",
|
"direction": "outgoing",
|
||||||
"value": "secondary",
|
"author": "AZ",
|
||||||
"label": "Additional option",
|
"text": "what\'s wirejs ui?"
|
||||||
"title": "Supporting example",
|
},
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
{
|
||||||
"text": "Another configurable message.",
|
"id": "answer",
|
||||||
"href": "#chat-bubble-demo",
|
"direction": "incoming",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"author": "Support agent",
|
||||||
"actionLabel": "View details",
|
"text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
|
||||||
"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": [
|
"links": [
|
||||||
{
|
{
|
||||||
"label": "Documentation",
|
"label": "Installation guide",
|
||||||
"href": "#documentation"
|
"href": "/installation"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "API reference",
|
"label": "Framework guides",
|
||||||
"href": "#api-reference"
|
"href": "/framework-guides"
|
||||||
}
|
}
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Standard"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
variant="secondary"
|
oneSided="true"
|
||||||
|
ariaLabel="One-sided"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Identity</span><h2>Messages with avatars</h2><p>Add avatars when people need to identify message ownership at a glance.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ChatBubble" size="lg" title="Advanced Chat Bubble" description="A richer configuration demonstrating additional content and hierarchy." items="[{"id":"chat-bubble-2-1","key":"chat-bubble-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"chat-bubble-2-2","key":"chat-bubble-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{"id":"question","direction":"incoming","author":"Support agent","title":"How can we help?","text":"You can ask questions like:","bullets":["What's WireJS UI?","How many component examples are there?","Is there a PRO version?"],"avatarSrc":"/avatar-example.svg","avatarAlt":"Support agent","avatarLabel":"View support agent"},{"id":"request","direction":"outgoing","author":"AZ","text":"what's wirejs ui?","avatarFallback":"AZ","avatarLabel":"View AZ"},{"id":"answer","direction":"incoming","author":"Support agent","text":"WireJS UI is an open-source set of reusable UI components built for responsive applications.","links":[{"label":"Installation guide","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}],"avatarSrc":"/avatar-example.svg","avatarAlt":"Support agent","avatarLabel":"View support agent"}]" oneSided="false" showAvatars="true" showMetadata="false" ariaLabel="Messages with avatars"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Messages with avatars usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ChatBubble
|
<pre><code><ChatBubble
|
||||||
size="lg"
|
|
||||||
title="Advanced Chat Bubble"
|
|
||||||
description="A richer configuration demonstrating additional content and hierarchy."
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-2-1",
|
"id": "question",
|
||||||
"key": "chat-bubble-2-1",
|
"direction": "incoming",
|
||||||
"value": "primary",
|
"author": "Support agent",
|
||||||
"label": "Advanced workflow",
|
"title": "How can we help?",
|
||||||
"title": "Advanced workflow",
|
"text": "You can ask questions like:",
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
"bullets": [
|
||||||
"text": "A configurable sample message.",
|
"What\'s WireJS UI?",
|
||||||
"href": "#chat-bubble-demo",
|
"How many component examples are there?",
|
||||||
"actionHref": "#chat-bubble-demo",
|
"Is there a PRO version?"
|
||||||
"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": [
|
"avatarSrc": "/avatar-example.svg",
|
||||||
{
|
"avatarAlt": "Support agent",
|
||||||
"label": "Documentation",
|
"avatarLabel": "View support agent"
|
||||||
"href": "#documentation"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "API reference",
|
|
||||||
"href": "#api-reference"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"values": [
|
|
||||||
"Included",
|
|
||||||
"Unlimited"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"id": "chat-bubble-2-2",
|
"id": "request",
|
||||||
"key": "chat-bubble-2-2",
|
"direction": "outgoing",
|
||||||
"value": "secondary",
|
"author": "AZ",
|
||||||
"label": "Additional option",
|
"text": "what\'s wirejs ui?",
|
||||||
"title": "Supporting example",
|
"avatarFallback": "AZ",
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
"avatarLabel": "View AZ"
|
||||||
"text": "Another configurable message.",
|
},
|
||||||
"href": "#chat-bubble-demo",
|
{
|
||||||
"actionHref": "#chat-bubble-demo",
|
"id": "answer",
|
||||||
"actionLabel": "Explore workflow",
|
"direction": "incoming",
|
||||||
"icon": "icon-[lucide--circle-check]",
|
"author": "Support agent",
|
||||||
"iconClass": "icon-[lucide--circle-check]",
|
"text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
|
||||||
"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": [
|
"links": [
|
||||||
{
|
{
|
||||||
"label": "Documentation",
|
"label": "Installation guide",
|
||||||
"href": "#documentation"
|
"href": "/installation"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"label": "API reference",
|
"label": "Framework guides",
|
||||||
"href": "#api-reference"
|
"href": "/framework-guides"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"values": [
|
"avatarSrc": "/avatar-example.svg",
|
||||||
"Included",
|
"avatarAlt": "Support agent",
|
||||||
"Unlimited"
|
"avatarLabel": "View support agent"
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
variant="success"
|
showAvatars="true"
|
||||||
|
ariaLabel="Messages with avatars"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Message details</span><h2>Message metadata</h2><p>Add delivery state, timestamps, or recovery actions beneath each message.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="chat-bubble-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"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{"id":"question","direction":"incoming","author":"Support agent","title":"How can we help?","text":"You can ask questions like:","bullets":["What's WireJS UI?","How many component examples are there?","Is there a PRO version?"],"avatarSrc":"/avatar-example.svg","avatarAlt":"Support agent","avatarLabel":"View support agent","status":"Sent","statusIcon":"icon-[lucide--check-check]","timestamp":"10:32","datetime":"2026-07-28T10:32:00"},{"id":"request","direction":"outgoing","author":"AZ","text":"what's wirejs ui?","avatarFallback":"AZ","avatarLabel":"View AZ","status":"Read","statusIcon":"icon-[lucide--check-check]","timestamp":"10:33","datetime":"2026-07-28T10:33:00"},{"id":"answer","direction":"incoming","author":"Support agent","text":"WireJS UI is an open-source set of reusable UI components built for responsive applications.","links":[{"label":"Installation guide","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}],"avatarSrc":"/avatar-example.svg","avatarAlt":"Support agent","avatarLabel":"View support agent","status":"Not sent","statusIcon":"icon-[lucide--circle-alert]","statusTone":"danger","action":"retry","actionLabel":"Retry"}]" oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Message metadata"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Message metadata usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ChatBubble
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"id": "question",
|
||||||
|
"direction": "incoming",
|
||||||
|
"author": "Support agent",
|
||||||
|
"title": "How can we help?",
|
||||||
|
"text": "You can ask questions like:",
|
||||||
|
"bullets": [
|
||||||
|
"What\'s WireJS UI?",
|
||||||
|
"How many component examples are there?",
|
||||||
|
"Is there a PRO version?"
|
||||||
|
],
|
||||||
|
"avatarSrc": "/avatar-example.svg",
|
||||||
|
"avatarAlt": "Support agent",
|
||||||
|
"avatarLabel": "View support agent",
|
||||||
|
"status": "Sent",
|
||||||
|
"statusIcon": "icon-[lucide--check-check]",
|
||||||
|
"timestamp": "10:32",
|
||||||
|
"datetime": "2026-07-28T10:32:00"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "request",
|
||||||
|
"direction": "outgoing",
|
||||||
|
"author": "AZ",
|
||||||
|
"text": "what\'s wirejs ui?",
|
||||||
|
"avatarFallback": "AZ",
|
||||||
|
"avatarLabel": "View AZ",
|
||||||
|
"status": "Read",
|
||||||
|
"statusIcon": "icon-[lucide--check-check]",
|
||||||
|
"timestamp": "10:33",
|
||||||
|
"datetime": "2026-07-28T10:33:00"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "answer",
|
||||||
|
"direction": "incoming",
|
||||||
|
"author": "Support agent",
|
||||||
|
"text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
|
||||||
|
"links": [
|
||||||
|
{
|
||||||
|
"label": "Installation guide",
|
||||||
|
"href": "/installation"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Framework guides",
|
||||||
|
"href": "/framework-guides"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"avatarSrc": "/avatar-example.svg",
|
||||||
|
"avatarAlt": "Support agent",
|
||||||
|
"avatarLabel": "View support agent",
|
||||||
|
"status": "Not sent",
|
||||||
|
"statusIcon": "icon-[lucide--circle-alert]",
|
||||||
|
"statusTone": "danger",
|
||||||
|
"action": "retry",
|
||||||
|
"actionLabel": "Retry"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
showAvatars="true"
|
||||||
|
showMetadata="true"
|
||||||
|
ariaLabel="Message metadata"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@action</code><span>Fires when the component's action is selected.</span></div><div><code>@messageClick</code><span>Fires when a message bubble is selected.</span></div><div><code>@avatarClick</code><span>Fires when a message avatar is selected.</span></div><div><code>@linkClick</code><span>Fires when a link inside a message is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Chat Bubble"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('action', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>oneSided</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showAvatars</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showMetadata</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Conversation"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chat-bubble-demo-1">Production default</a><a href="#chat-bubble-demo-2">Compact application</a><a href="#chat-bubble-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chat-bubble-demo-1">Conversation</a><a href="#chat-bubble-demo-2">One-sided</a><a href="#chat-bubble-demo-3">Messages with avatars</a><a href="#chat-bubble-demo-4">Message metadata</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,12 +3,31 @@ page CheckboxDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Checkbox"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "checkbox-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "checkboxField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Accept notifications"
|
||||||
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter checkbox"
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
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") ?? "terms"
|
||||||
|
state playground_values = ctx.url.searchParams.get("pg_values") ?? "[]"
|
||||||
|
state playground_options = ctx.url.searchParams.get("pg_options") ?? "[]"
|
||||||
|
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "true"
|
||||||
|
state playground_indeterminate = ctx.url.searchParams.get("pg_indeterminate") ?? "false"
|
||||||
|
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "vertical"
|
||||||
|
state playground_card = ctx.url.searchParams.get("pg_card") ?? "false"
|
||||||
|
state playground_rightAligned = ctx.url.searchParams.get("pg_rightAligned") ?? "false"
|
||||||
|
state playground_list = ctx.url.searchParams.get("pg_list") ?? "false"
|
||||||
|
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") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Checkbox"
|
title = "Checkbox"
|
||||||
description = "Theme-aware, responsive checkbox component."
|
description = "Theme-aware, responsive checkbox component."
|
||||||
@@ -22,7 +41,7 @@ page CheckboxDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Checkbox</h1>
|
<h1>Checkbox</h1>
|
||||||
<p>Theme-aware, responsive checkbox component.</p>
|
<p>Theme-aware, responsive checkbox component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>27 props</span><span>0 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -31,18 +50,25 @@ page CheckboxDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Checkbox" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" checked="{playground_checked}" disabled="{playground_disabled}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Checkbox" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" value="{playground_value}" values="{playground_values}" options="{playground_options}" checked="{playground_checked}" indeterminate="{playground_indeterminate}" orientation="{playground_orientation}" card="{playground_card}" rightAligned="{playground_rightAligned}" list="{playground_list}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Checkbox
|
<pre><code data-playground-code><Checkbox
|
||||||
value="sample-1"
|
id="checkbox-1"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Accept notifications"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[]'
|
||||||
|
options='[]'
|
||||||
|
checked="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>27 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-checkbox-size"><span><strong>size</strong><small>string</small></span><select id="playground-checkbox-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-checkbox-color"><span><strong>color</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-label"><span><strong>label</strong><small>string</small></span><input id="playground-checkbox-label" name="pg_label" type="text" value="Checkbox" /></label><label class="playground-field" for="playground-checkbox-name"><span><strong>name</strong><small>string</small></span><input id="playground-checkbox-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-value"><span><strong>value</strong><small>string</small></span><input id="playground-checkbox-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-toggle" for="playground-checkbox-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-checkbox-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-checkbox-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-class"><span><strong>class</strong><small>string</small></span><input id="playground-checkbox-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-checkbox-size"><span><strong>size</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-color"><span><strong>color</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-id"><span><strong>id</strong><small>string</small></span><input id="playground-checkbox-id" name="pg_id" type="text" value="checkbox-1" /></label><label class="playground-field" for="playground-checkbox-name"><span><strong>name</strong><small>string</small></span><input id="playground-checkbox-name" name="pg_name" type="text" value="checkboxField" /></label><label class="playground-field" for="playground-checkbox-label"><span><strong>label</strong><small>string</small></span><input id="playground-checkbox-label" name="pg_label" type="text" value="Accept notifications" /></label><label class="playground-toggle" for="playground-checkbox-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-checkbox-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-checkbox-placeholder" name="pg_placeholder" type="text" value="Enter checkbox" /></label><label class="playground-field" for="playground-checkbox-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-checkbox-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-checkbox-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-checkbox-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-checkbox-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-checkbox-value"><span><strong>value</strong><small>string</small></span><input id="playground-checkbox-value" name="pg_value" type="text" value="terms" /></label><label class="playground-field" for="playground-checkbox-values"><span><strong>values</strong><small>string</small></span><textarea id="playground-checkbox-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-checkbox-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-checkbox-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-checkbox-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-checkbox-checked" name="pg_checked" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-indeterminate"><span><strong>indeterminate</strong><small>boolean</small></span><input id="playground-checkbox-indeterminate" name="pg_indeterminate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-checkbox-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-checkbox-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-checkbLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -51,67 +77,444 @@ page CheckboxDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default checkbox</h2><p>Use a checkbox for an independent yes-or-no choice.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="checkbox-demo-1" class="demo-canvas demo-canvas--1">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Checkbox" size="default" label="Checkbox" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Checkbox" size="default" color="primary" id="checkbox-1" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[]" options="[]" checked="true" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default checkbox usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Checkbox
|
<pre><code><Checkbox
|
||||||
value="sample-1"
|
id="checkbox-1"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Accept notifications"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[]'
|
||||||
|
options='[]'
|
||||||
|
checked="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">States</span><h2>Indeterminate</h2><p>Represent a partially selected group with the mixed state.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="checkbox-demo-2" class="demo-canvas demo-canvas--2">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Checkbox" size="sm" label="Compact example" value="sample-2" checked="false" disabled="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Checkbox" size="default" color="primary" id="checkbox-2" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" value="terms" values="[]" options="[]" checked="false" indeterminate="true" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Indeterminate usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Checkbox
|
<pre><code><Checkbox
|
||||||
size="sm"
|
id="checkbox-2"
|
||||||
label="Compact example"
|
name="checkboxField"
|
||||||
value="sample-2"
|
label="Accept notifications"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
variant="outlined"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
value="terms"
|
||||||
|
values='[]'
|
||||||
|
options='[]'
|
||||||
|
indeterminate="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Disable a checkbox when its choice is unavailable.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="checkbox-demo-3" class="demo-canvas demo-canvas--3">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Checkbox" size="lg" label="Advanced example" value="sample-3" checked="false" disabled="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Checkbox" size="default" color="primary" id="checkbox-3" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" value="terms" values="[]" options="[]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Checkbox
|
<pre><code><Checkbox
|
||||||
size="lg"
|
id="checkbox-3"
|
||||||
label="Advanced example"
|
name="checkboxField"
|
||||||
value="sample-3"
|
label="Accept notifications"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
variant="floating"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
value="terms"
|
||||||
|
values='[]'
|
||||||
|
options='[]'
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Groups</span><h2>Checkbox group options</h2><p>Render passed options as a named checkbox group.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="checkbox-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"><div data-component="Checkbox" size="sm" color="primary" id="checkbox-4" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="pill" icon="" iconPosition="start" value="terms" values="["product"]" options="[{"label":"Product updates","value":"product","description":""},{"label":"Account activity","value":"account","description":""},{"label":"Partner offers","value":"partners","description":""}]" checked="false" indeterminate="false" orientation="horizontal" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Checkbox group options usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Checkbox
|
||||||
|
size="sm"
|
||||||
|
id="checkbox-4"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Notification preferences"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
variant="pill"
|
||||||
|
value="terms"
|
||||||
|
values='[
|
||||||
|
"product"
|
||||||
|
]'
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Product updates",
|
||||||
|
"value": "product",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Account activity",
|
||||||
|
"value": "account",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Partner offers",
|
||||||
|
"value": "partners",
|
||||||
|
"description": ""
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
orientation="horizontal"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Content</span><h2>Checkboxes with descriptions</h2><p>Add supporting copy to clarify each choice.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="checkbox-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"><div data-component="Checkbox" size="default" color="primary" id="checkbox-5" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="["product"]" options="[{"label":"Product updates","value":"product","description":"News about features and improvements."},{"label":"Account activity","value":"account","description":"Important security and billing alerts."},{"label":"Partner offers","value":"partners","description":"Relevant offers from trusted partners."}]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Checkboxes with descriptions usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Checkbox
|
||||||
|
id="checkbox-5"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Notification preferences"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[
|
||||||
|
"product"
|
||||||
|
]'
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Product updates",
|
||||||
|
"value": "product",
|
||||||
|
"description": "News about features and improvements."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Account activity",
|
||||||
|
"value": "account",
|
||||||
|
"description": "Important security and billing alerts."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Partner offers",
|
||||||
|
"value": "partners",
|
||||||
|
"description": "Relevant offers from trusted partners."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Cards</span><h2>Checkbox cards</h2><p>Present multiple choices as selectable horizontal cards.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="checkbox-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"><div data-component="Checkbox" size="default" color="primary" id="checkbox-6" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="["product"]" options="[{"label":"Product updates","value":"product","description":"News about features and improvements."},{"label":"Account activity","value":"account","description":"Important security and billing alerts."},{"label":"Partner offers","value":"partners","description":"Relevant offers from trusted partners."}]" checked="false" indeterminate="false" orientation="horizontal" card="true" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Checkbox cards usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Checkbox
|
||||||
|
id="checkbox-6"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Notification preferences"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[
|
||||||
|
"product"
|
||||||
|
]'
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Product updates",
|
||||||
|
"value": "product",
|
||||||
|
"description": "News about features and improvements."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Account activity",
|
||||||
|
"value": "account",
|
||||||
|
"description": "Important security and billing alerts."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Partner offers",
|
||||||
|
"value": "partners",
|
||||||
|
"description": "Relevant offers from trusted partners."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
orientation="horizontal"
|
||||||
|
card="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Cards</span><h2>Vertical checkbox cards</h2><p>Stack selectable checkbox cards vertically.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="checkbox-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"><div data-component="Checkbox" size="default" color="primary" id="checkbox-7" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="["product"]" options="[{"label":"Product updates","value":"product","description":"News about features and improvements."},{"label":"Account activity","value":"account","description":"Important security and billing alerts."},{"label":"Partner offers","value":"partners","description":"Relevant offers from trusted partners."}]" checked="false" indeterminate="false" orientation="vertical" card="true" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Vertical checkbox cards usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Checkbox
|
||||||
|
id="checkbox-7"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Notification preferences"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[
|
||||||
|
"product"
|
||||||
|
]'
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Product updates",
|
||||||
|
"value": "product",
|
||||||
|
"description": "News about features and improvements."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Account activity",
|
||||||
|
"value": "account",
|
||||||
|
"description": "Important security and billing alerts."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Partner offers",
|
||||||
|
"value": "partners",
|
||||||
|
"description": "Relevant offers from trusted partners."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
card="true"
|
||||||
|
inline="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Alignment</span><h2>Right-aligned checkbox</h2><p>Place checkbox controls at the far edge of their labels.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="checkbox-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"><div data-component="Checkbox" size="default" color="primary" id="checkbox-8" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="["product"]" options="[{"label":"Product updates","value":"product","description":"News about features and improvements."},{"label":"Account activity","value":"account","description":"Important security and billing alerts."},{"label":"Partner offers","value":"partners","description":"Relevant offers from trusted partners."}]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="true" list="false" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Right-aligned checkbox usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Checkbox
|
||||||
|
id="checkbox-8"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Notification preferences"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[
|
||||||
|
"product"
|
||||||
|
]'
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Product updates",
|
||||||
|
"value": "product",
|
||||||
|
"description": "News about features and improvements."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Account activity",
|
||||||
|
"value": "account",
|
||||||
|
"description": "Important security and billing alerts."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Partner offers",
|
||||||
|
"value": "partners",
|
||||||
|
"description": "Relevant offers from trusted partners."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
rightAligned="true"
|
||||||
|
cornerHint="Optional"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Lists</span><h2>Checkbox list group</h2><p>Separate checkbox options with list dividers.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="checkbox-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"><div data-component="Checkbox" size="default" color="primary" id="checkbox-9" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="["product"]" options="[{"label":"Product updates","value":"product","description":"News about features and improvements."},{"label":"Account activity","value":"account","description":"Important security and billing alerts."},{"label":"Partner offers","value":"partners","description":"Relevant offers from trusted partners."}]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="true" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Checkbox list group usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Checkbox
|
||||||
|
id="checkbox-9"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Notification preferences"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[
|
||||||
|
"product"
|
||||||
|
]'
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Product updates",
|
||||||
|
"value": "product",
|
||||||
|
"description": "News about features and improvements."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Account activity",
|
||||||
|
"value": "account",
|
||||||
|
"description": "Important security and billing alerts."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Partner offers",
|
||||||
|
"value": "partners",
|
||||||
|
"description": "Relevant offers from trusted partners."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
list="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Lists</span><h2>Horizontal checkbox list group</h2><p>Combine list styling with a horizontal layout.</p></div>
|
||||||
|
<span class="demo-case-number">010</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="checkbox-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"><div data-component="Checkbox" size="default" color="primary" id="checkbox-10" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="["product"]" options="[{"label":"Product updates","value":"product","description":"News about features and improvements."},{"label":"Account activity","value":"account","description":"Important security and billing alerts."},{"label":"Partner offers","value":"partners","description":"Relevant offers from trusted partners."}]" checked="false" indeterminate="false" orientation="horizontal" card="false" rightAligned="false" list="true" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Horizontal checkbox list group usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Checkbox
|
||||||
|
id="checkbox-10"
|
||||||
|
name="checkboxField"
|
||||||
|
label="Notification preferences"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[
|
||||||
|
"product"
|
||||||
|
]'
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Product updates",
|
||||||
|
"value": "product",
|
||||||
|
"description": "News about features and improvements."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Account activity",
|
||||||
|
"value": "account",
|
||||||
|
"description": "Important security and billing alerts."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Partner offers",
|
||||||
|
"value": "partners",
|
||||||
|
"description": "Relevant offers from trusted partners."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
orientation="horizontal"
|
||||||
|
list="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validation states</h2><p>Validate required checkbox choices with @wrnexus/validation.</p></div>
|
||||||
|
<span class="demo-case-number">011</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="checkbox-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Checkbox" size="default" color="primary" id="checkbox-11" name="validatedField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="["product"]" options="[{"label":"Product updates","value":"product","description":"News about features and improvements."},{"label":"Account activity","value":"account","description":"Important security and billing alerts."},{"label":"Partner offers","value":"partners","description":"Relevant offers from trusted partners."}]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="Select at least one notification type." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validation states usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Checkbox
|
||||||
|
id="checkbox-11"
|
||||||
|
name="validatedField"
|
||||||
|
label="Notification preferences"
|
||||||
|
placeholder="Enter checkbox"
|
||||||
|
value="terms"
|
||||||
|
values='[
|
||||||
|
"product"
|
||||||
|
]'
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Product updates",
|
||||||
|
"value": "product",
|
||||||
|
"description": "News about features and improvements."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Account activity",
|
||||||
|
"value": "account",
|
||||||
|
"description": "Important security and billing alerts."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Partner offers",
|
||||||
|
"value": "partners",
|
||||||
|
"description": "Relevant offers from trusted partners."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
helperText="Select at least one notification type."
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Checkbox"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"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>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>"Checkbox"</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>values</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</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>indeterminate</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>card</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>rightAligned</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>list</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>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#checkbox-demo-1">Production default</a><a href="#checkbox-demo-2">Compact application</a><a href="#checkbox-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#checkbox-demo-1">Default checkbox</a><a href="#checkbox-demo-2">Indeterminate</a><a href="#checkbox-demo-3">Disabled</a><a href="#checkbox-demo-4">Checkbox group options</a><a href="#checkbox-demo-5">Checkboxes with descriptions</a><a href="#checkbox-demo-6">Checkbox cards</a><a href="#checkbox-demo-7">Vertical checkbox cards</a><a href="#checkbox-demo-8">Right-aligned checkbox</a><a href="#checkbox-demo-9">Checkbox list group</a><a href="#checkbox-demo-10">Horizontal checkbox list group</a><a href="#checkbox-demo-11">Validation states</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page ClipboardDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Clipboard</h1>
|
<h1>Clipboard</h1>
|
||||||
<p>Theme-aware, responsive clipboard component.</p>
|
<p>Theme-aware, responsive clipboard component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page ClipboardDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-clipboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-clipboard-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-clipboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-clipboard-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-clipboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-clipboard-title" name="pg_title" type="text" value="Clipboard example" /></label><label class="playground-field" for="playground-clipboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-clipboard-description" name="pg_description" type="text" value="A polished default clipboard for a modern application." /></label><label class="playground-field" for="playground-clipboard-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-clipboard-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-clipboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-clipboard-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-clipboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-clipboard-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-clipboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-clipboard-title" name="pg_title" type="text" value="Clipboard example" /></label><label class="playground-field" for="playground-clipboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-clipboard-description" name="pg_description" type="text" value="A polished default clipboard for a modern application." /></label><label class="playground-field" for="playground-clipboard-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-clipboard-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "clipboard-0-1",
|
"id": "clipboard-0-1",
|
||||||
"key": "clipboard-0-1",
|
"key": "clipboard-0-1",
|
||||||
@@ -649,11 +649,15 @@ page ClipboardDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('copy', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Clipboard"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Clipboard"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#clipboard-demo-1">Production default</a><a href="#clipboard-demo-2">Compact application</a><a href="#clipboard-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#clipboard-demo-1">Production default</a><a href="#clipboard-demo-2">Compact application</a><a href="#clipboard-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,9 +3,12 @@ page CollapseDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"collapse-0-1\",\n \"key\": \"collapse-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#collapse-demo\",\n \"actionHref\": \"#collapse-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"collapse-0-2\",\n \"key\": \"collapse-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#collapse-demo\",\n \"actionHref\": \"#collapse-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"collapse-default-panel\",\n \"label\": \"Collapse\",\n \"closeLabel\": \"Collapse\",\n \"content\": \"This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused.\"\n }\n]"
|
||||||
state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
|
state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_mode = ctx.url.searchParams.get("pg_mode") ?? "panel"
|
||||||
|
state playground_initialOpenIndexes = ctx.url.searchParams.get("pg_initialOpenIndexes") ?? "[]"
|
||||||
|
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Default collapse"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Collapse"
|
title = "Collapse"
|
||||||
description = "Theme-aware, responsive collapse component."
|
description = "Theme-aware, responsive collapse component."
|
||||||
@@ -19,7 +22,7 @@ page CollapseDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Collapse</h1>
|
<h1>Collapse</h1>
|
||||||
<p>Theme-aware, responsive collapse component.</p>
|
<p>Theme-aware, responsive collapse component.</p>
|
||||||
<div class="detail-badges"><span>5 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -28,232 +31,34 @@ page CollapseDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Collapse" size="{playground_size}" color="{playground_color}" items="{playground_items}" multiple="{playground_multiple}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Collapse" size="{playground_size}" color="{playground_color}" items="{playground_items}" multiple="{playground_multiple}" mode="{playground_mode}" initialOpenIndexes="{playground_initialOpenIndexes}" ariaLabel="{playground_ariaLabel}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Collapse
|
<pre><code data-playground-code><Collapse
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "collapse-0-1",
|
"id": "collapse-default-panel",
|
||||||
"key": "collapse-0-1",
|
"label": "Collapse",
|
||||||
"value": "primary",
|
"closeLabel": "Collapse",
|
||||||
"label": "Primary workflow",
|
"content": "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."
|
||||||
"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"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
initialOpenIndexes='[]'
|
||||||
|
ariaLabel="Default collapse"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>5 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-collapse-size"><span><strong>size</strong><small>string</small></span><select id="playground-collapse-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-collapse-color"><span><strong>color</strong><small>string</small></span><select id="playground-collapse-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-collapse-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-collapse-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-collapse-size"><span><strong>size</strong><small>string</small></span><select id="playground-collapse-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-collapse-color"><span><strong>color</strong><small>string</small></span><select id="playground-collapse-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-collapse-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-collapse-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "collapse-0-1",
|
"id": "collapse-default-panel",
|
||||||
"key": "collapse-0-1",
|
"label": "Collapse",
|
||||||
"value": "primary",
|
"closeLabel": "Collapse",
|
||||||
"label": "Primary workflow",
|
"content": "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."
|
||||||
"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"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-collapse-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-collapse-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-collapse-class"><span><strong>class</strong><small>string</small></span><input id="playground-collapse-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-collapse-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-collapse-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-collapse-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-collapse-mode" name="pg_mode" type="text" value="panel" /></label><label class="playground-field" for="playground-collapse-initialOpenIndexes"><span><strong>initial Open Indexes</strong><small>string</small></span><textarea id="playground-collapse-initialOpenIndexes" name="pg_initialOpenIndexes" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-collapse-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-collapse-ariaLabel" name="pg_ariaLabel" type="text" value="Default collapse" /></label><label class="playground-field" for="playground-collapse-class"><span><strong>class</strong><small>string</small></span><input id="playground-collapse-class" name="pg_class" type="text" value="" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -262,386 +67,69 @@ page CollapseDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default collapse</h2><p>Use a button trigger to expand and collapse supporting content.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="collapse-demo-1" class="demo-canvas demo-canvas--1">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="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" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Collapse" size="default" color="primary" items="[{"id":"collapse-default-panel","label":"Collapse","closeLabel":"Collapse","content":"This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."}]" multiple="false" mode="panel" initialOpenIndexes="[]" ariaLabel="Default collapse"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default collapse usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Collapse
|
<pre><code><Collapse
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "collapse-0-1",
|
"id": "collapse-default-panel",
|
||||||
"key": "collapse-0-1",
|
"label": "Collapse",
|
||||||
"value": "primary",
|
"closeLabel": "Collapse",
|
||||||
"label": "Primary workflow",
|
"content": "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."
|
||||||
"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"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
initialOpenIndexes='[]'
|
||||||
|
ariaLabel="Default collapse"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Inline content</span><h2>Read more toggle</h2><p>Reveal additional copy inline with a read more and read less trigger.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="collapse-demo-2" class="demo-canvas demo-canvas--2">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="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" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Collapse" size="default" color="primary" items="[{"id":"collapse-read-more-panel","label":"Read more","closeLabel":"Read less","preview":"WireJS UI is an open-source set of reusable components based on a utility-first styling system.","content":"This additional collapse body is hidden by default. Expanding it reveals supporting information while preserving a compact reading experience."}]" multiple="false" mode="inline" initialOpenIndexes="[]" ariaLabel="Read more toggle"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Read more toggle usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Collapse
|
<pre><code><Collapse
|
||||||
size="sm"
|
|
||||||
items='[
|
items='[
|
||||||
{
|
{
|
||||||
"id": "collapse-1-1",
|
"id": "collapse-read-more-panel",
|
||||||
"key": "collapse-1-1",
|
"label": "Read more",
|
||||||
"value": "primary",
|
"closeLabel": "Read less",
|
||||||
"label": "Secondary workflow",
|
"preview": "WireJS UI is an open-source set of reusable components based on a utility-first styling system.",
|
||||||
"title": "Secondary workflow",
|
"content": "This additional collapse body is hidden by default. Expanding it reveals supporting information while preserving a compact reading experience."
|
||||||
"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"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]'
|
|
||||||
/></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="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"><div data-component="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" class="showcase-instance showcase-instance--3"></div></div>
|
|
||||||
</div>
|
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
||||||
<pre><code><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"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
mode="inline"
|
||||||
|
initialOpenIndexes='[]'
|
||||||
|
ariaLabel="Read more toggle"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('toggle', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>mode</code></td><td>string</td><td><code>"panel"</code></td><td>No</td></tr><tr><td><code>initialOpenIndexes</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Collapsible content"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#collapse-demo-1">Production default</a><a href="#collapse-demo-2">Compact application</a><a href="#collapse-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#collapse-demo-1">Default collapse</a><a href="#collapse-demo-2">Read more toggle</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,17 +3,23 @@ page ColorPickerDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Color Picker"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "color-picker-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "color-pickerField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Brand color"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "color"
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter color picker"
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? "#2563eb"
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Color Picker"
|
title = "Color Picker"
|
||||||
description = "Theme-aware, responsive color picker component."
|
description = "Theme-aware, responsive color picker component."
|
||||||
@@ -27,7 +33,7 @@ page ColorPickerDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Color Picker</h1>
|
<h1>Color Picker</h1>
|
||||||
<p>Theme-aware, responsive color picker component.</p>
|
<p>Theme-aware, responsive color picker component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>19 props</span><span>0 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,19 +42,22 @@ page ColorPickerDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="ColorPicker" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="ColorPicker" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" value="{playground_value}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" variant="{playground_variant}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><ColorPicker
|
<pre><code data-playground-code><ColorPicker
|
||||||
value="sample-1"
|
id="color-picker-1"
|
||||||
placeholder="Enter a sample value"
|
name="color-pickerField"
|
||||||
|
label="Brand color"
|
||||||
|
placeholder="Enter color picker"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-color-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-color-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-color-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-color-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-color-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-color-picker-label" name="pg_label" type="text" value="Color Picker" /></label><label class="playground-field" for="playground-color-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-color-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-color-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-color-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-color-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-color-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-color-picker-type" name="pg_type" type="text" value="color" /></label><label class="playground-field" for="playground-color-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-color-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-color-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-color-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-color-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-color-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-color-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-color-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-color-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-color-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-color-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-color-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-color-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-color-picker-id" name="pg_id" type="text" value="color-picker-1" /></label><label class="playground-field" for="playground-color-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-color-picker-name" name="pg_name" type="text" value="color-pickerField" /></label><label class="playground-field" for="playground-color-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-color-picker-label" name="pg_label" type="text" value="Brand color" /></label><label class="playground-toggle" for="playground-color-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-color-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-color-picker-placeholder" name="pg_placeholder" type="text" value="Enter color picker" /></label><label class="playground-field" for="playground-color-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-color-picker-value" name="pg_value" type="text" value="#2563eb" /></label><label class="playground-field" for="playground-color-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-color-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-color-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-color-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-color-picker-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-color-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-color-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-color-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-color-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-color-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-color-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-color-picker-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-toggle" for="playground-color-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-color-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-color-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playgroundLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,70 +66,216 @@ page ColorPickerDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="color-picker-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="color-picker-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ColorPicker" size="default" label="Color Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-1" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ColorPicker
|
<pre><code><ColorPicker
|
||||||
value="sample-1"
|
id="color-picker-1"
|
||||||
placeholder="Enter a sample value"
|
name="color-pickerField"
|
||||||
|
label="Brand color"
|
||||||
|
placeholder="Enter color picker"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="color-picker-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="color-picker-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ColorPicker" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-2" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="outlined" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ColorPicker
|
<pre><code><ColorPicker
|
||||||
size="sm"
|
id="color-picker-2"
|
||||||
label="Compact example"
|
name="color-pickerField"
|
||||||
value="sample-2"
|
label="Brand color"
|
||||||
placeholder="Enter a sample value"
|
placeholder="Enter color picker"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
variant="outlined"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="color-picker-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="color-picker-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ColorPicker" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-3" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" variant="floating" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ColorPicker
|
<pre><code><ColorPicker
|
||||||
size="lg"
|
id="color-picker-3"
|
||||||
label="Advanced example"
|
name="color-pickerField"
|
||||||
value="sample-3"
|
label="Brand color"
|
||||||
placeholder="Search by name, email, or identifier"
|
placeholder="Enter color picker"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
variant="floating"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="color-picker-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"><div data-component="ColorPicker" size="sm" color="primary" id="color-picker-4" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="pill" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ColorPicker
|
||||||
|
size="sm"
|
||||||
|
id="color-picker-4"
|
||||||
|
name="color-pickerField"
|
||||||
|
label="Brand color"
|
||||||
|
placeholder="Enter color picker"
|
||||||
|
variant="pill"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="color-picker-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"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-5" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ColorPicker
|
||||||
|
id="color-picker-5"
|
||||||
|
name="color-pickerField"
|
||||||
|
label="Brand color"
|
||||||
|
placeholder="Enter color picker"
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="color-picker-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"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-6" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="true" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ColorPicker
|
||||||
|
id="color-picker-6"
|
||||||
|
name="color-pickerField"
|
||||||
|
label="Brand color"
|
||||||
|
placeholder="Enter color picker"
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="color-picker-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"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-7" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="We'll never share your details." cornerHint="" error="" inline="true" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ColorPicker
|
||||||
|
id="color-picker-7"
|
||||||
|
name="color-pickerField"
|
||||||
|
label="Brand color"
|
||||||
|
placeholder="Enter color picker"
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="color-picker-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"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-8" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ColorPicker
|
||||||
|
id="color-picker-8"
|
||||||
|
name="color-pickerField"
|
||||||
|
label="Brand color"
|
||||||
|
placeholder="Enter color picker"
|
||||||
|
cornerHint="Optional"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="color-picker-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-9" name="validatedField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ColorPicker
|
||||||
|
id="color-picker-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Brand color"
|
||||||
|
placeholder="Enter color picker"
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Color Picker"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"color"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>"Color"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"#2563eb"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#color-picker-demo-1">Production default</a><a href="#color-picker-demo-2">Compact application</a><a href="#color-picker-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#color-picker-demo-1">Default field</a><a href="#color-picker-demo-2">Outlined with start icon</a><a href="#color-picker-demo-3">Floating label</a><a href="#color-picker-demo-4">Pill and compact size</a><a href="#color-picker-demo-5">Read only</a><a href="#color-picker-demo-6">Disabled</a><a href="#color-picker-demo-7">Inline helper text</a><a href="#color-picker-demo-8">Field with corner hint</a><a href="#color-picker-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ page ColumnsDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-columns-size"><span><strong>size</strong><small>string</small></span><select id="playground-columns-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-columns-color"><span><strong>color</strong><small>string</small></span><select id="playground-columns-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-columns-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-columns-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-columns-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-columns-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-columns-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-columns-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-columns-class"><span><strong>class</strong><small>string</small></span><input id="playground-columns-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-columns-size"><span><strong>size</strong><small>string</small></span><select id="playground-columns-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-columns-color"><span><strong>color</strong><small>string</small></span><select id="playground-columns-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-columns-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-columns-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-columns-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-columns-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-columns-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-columns-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-columns-class"><span><strong>class</strong><small>string</small></span><input id="playground-columns-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -97,11 +97,11 @@ page ColumnsDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#columns-demo-1">Production default</a><a href="#columns-demo-2">Compact application</a><a href="#columns-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#columns-demo-1">Production default</a><a href="#columns-demo-2">Compact application</a><a href="#columns-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -111,7 +111,7 @@ page ComboBoxDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>41 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>41 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-combo-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-combo-box-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-combo-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-combo-box-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-combo-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-combo-box-label" name="pg_label" type="text" value="Default autocomplete" /></label><label class="playground-field" for="playground-combo-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-combo-box-name" name="pg_name" type="text" value="combobox-1" /></label><label class="playground-field" for="playground-combo-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-combo-box-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-combo-box-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-combo-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-combo-box-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-combo-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-combo-box-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-combo-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-combo-box-label" name="pg_label" type="text" value="Default autocomplete" /></label><label class="playground-field" for="playground-combo-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-combo-box-name" name="pg_name" type="text" value="combobox-1" /></label><label class="playground-field" for="playground-combo-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-combo-box-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-combo-box-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"value": "design",
|
"value": "design",
|
||||||
"label": "Design",
|
"label": "Design",
|
||||||
@@ -1319,14 +1319,9 @@ page ComboBoxDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every interaction</h2><p>Events are declared with <code>@event</code>, bubble from the component root, and expose their state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires whenever the autocomplete query changes.</span></div><div><code>@select</code><span>Fires after an option is selected by pointer or keyboard.</span></div><div><code>@change</code><span>Fires when the selected value changes or is cleared.</span></div><div><code>@clear</code><span>Fires after the current selection is cleared.</span></div><div><code>@open</code><span>Fires when the suggestion dropdown opens.</span></div><div><code>@close</code><span>Fires when the suggestion dropdown closes.</span></div><div><code>@load</code><span>Fires after a remote request succeeds.</span></div><div><code>@error</code><span>Fires when a remote request fails.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-wrn-combobox]")
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the search query changes or is submitted.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
component.addEventListener("select", (event) => {
|
component.addEventListener('search', (event) => {
|
||||||
console.log(event.detail.value)
|
|
||||||
console.log(event.detail.complete)
|
|
||||||
})
|
|
||||||
|
|
||||||
component.addEventListener("load", (event) => {
|
|
||||||
console.log(event.detail)
|
console.log(event.detail)
|
||||||
})</code></pre></section></div></section>
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"ComboBox"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Search or select an option"</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Start typing…"</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowCustomValue</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading suggestions…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No matching options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear value"</code></td><td>No</td></tr><tr><td><code>toggleLabel</code></td><td>string</td><td><code>"Toggle suggestions"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>optionTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fixed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>remoteUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>remoteQueryParam</code></td><td>string</td><td><code>"q"</code></td><td>No</td></tr><tr><td><code>remoteDebounce</code></td><td>number</td><td><code>250</code></td><td>No</td></tr><tr><td><code>remoteAutoLoad</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>infinite</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>hasMore</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"ComboBox"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Search or select an option"</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Start typing…"</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowCustomValue</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading suggestions…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No matching options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear value"</code></td><td>No</td></tr><tr><td><code>toggleLabel</code></td><td>string</td><td><code>"Toggle suggestions"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>optionTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fixed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>remoteUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>remoteQueryParam</code></td><td>string</td><td><code>"q"</code></td><td>No</td></tr><tr><td><code>remoteDebounce</code></td><td>number</td><td><code>250</code></td><td>No</td></tr><tr><td><code>remoteAutoLoad</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>infinite</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>hasMore</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</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>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page ConfettiDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Confetti</h1>
|
<h1>Confetti</h1>
|
||||||
<p>Theme-aware, responsive confetti component.</p>
|
<p>Theme-aware, responsive confetti component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page ConfettiDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-confetti-size"><span><strong>size</strong><small>string</small></span><select id="playground-confetti-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-confetti-color"><span><strong>color</strong><small>string</small></span><select id="playground-confetti-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-confetti-title"><span><strong>title</strong><small>string</small></span><input id="playground-confetti-title" name="pg_title" type="text" value="Confetti example" /></label><label class="playground-field" for="playground-confetti-description"><span><strong>description</strong><small>string</small></span><input id="playground-confetti-description" name="pg_description" type="text" value="A polished default confetti for a modern application." /></label><label class="playground-field" for="playground-confetti-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-confetti-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-confetti-size"><span><strong>size</strong><small>string</small></span><select id="playground-confetti-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-confetti-color"><span><strong>color</strong><small>string</small></span><select id="playground-confetti-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-confetti-title"><span><strong>title</strong><small>string</small></span><input id="playground-confetti-title" name="pg_title" type="text" value="Confetti example" /></label><label class="playground-field" for="playground-confetti-description"><span><strong>description</strong><small>string</small></span><input id="playground-confetti-description" name="pg_description" type="text" value="A polished default confetti for a modern application." /></label><label class="playground-field" for="playground-confetti-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-confetti-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "confetti-0-1",
|
"id": "confetti-0-1",
|
||||||
"key": "confetti-0-1",
|
"key": "confetti-0-1",
|
||||||
@@ -649,11 +649,15 @@ page ConfettiDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('start', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Confetti"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Confetti"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#confetti-demo-1">Production default</a><a href="#confetti-demo-2">Compact application</a><a href="#confetti-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#confetti-demo-1">Production default</a><a href="#confetti-demo-2">Compact application</a><a href="#confetti-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ page ContainerDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-container-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-container-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-container-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-container-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -103,11 +103,11 @@ page ContainerDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#container-demo-1">Production default</a><a href="#container-demo-2">Compact application</a><a href="#container-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#container-demo-1">Production default</a><a href="#container-demo-2">Compact application</a><a href="#container-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ page ContextMenuDetail {
|
|||||||
<span class="showcase-eyebrow">Overlays component</span>
|
<span class="showcase-eyebrow">Overlays component</span>
|
||||||
<h1>Context Menu</h1>
|
<h1>Context Menu</h1>
|
||||||
<p>Theme-aware, responsive context menu component.</p>
|
<p>Theme-aware, responsive context menu component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -45,7 +45,7 @@ page ContextMenuDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-context-menu-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-context-menu-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-context-menu-closeLabel" name="pg_closeLabel" type="text" value="Context Menu" /></label><label class="playground-field" for="playground-context-menu-class"><span><strong>class</strong><small>string</small></span><input id="playground-context-menu-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-context-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-context-menu-size" name="pg_size"><option value="default" selected>default</option><option value="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-context-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-context-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-context-menu-title"><span><strong>title</strong><small>string</small></span><input id="playground-context-menu-title" name="pg_title" type="text" value="Context Menu example" /></label><label class="playground-field" for="playground-context-menu-description"><span><strong>description</strong><small>string</small></span><input id="playground-context-menu-description" name="pg_description" type="text" value="A polished default context menu for a modern application." /></label><label class="playground-toggle" for="playground-context-menu-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-context-menu-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-context-menu-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-context-menu-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-context-menu-closeLabel" name="pg_closeLabel" type="text" value="Context Menu" /></label><label class="playground-field" for="playground-context-menu-class"><span><strong>class</strong><small>string</small></span><input id="playground-context-menu-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -117,11 +117,15 @@ page ContextMenuDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('open', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Context Menu"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Context Menu"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#context-menu-demo-1">Production default</a><a href="#context-menu-demo-2">Compact application</a><a href="#context-menu-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#context-menu-demo-1">Production default</a><a href="#context-menu-demo-2">Compact application</a><a href="#context-menu-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ page CopyMarkupDetail {
|
|||||||
<span class="showcase-eyebrow">Advanced Forms component</span>
|
<span class="showcase-eyebrow">Advanced Forms component</span>
|
||||||
<h1>Copy Markup</h1>
|
<h1>Copy Markup</h1>
|
||||||
<p>Theme-aware, responsive copy markup component.</p>
|
<p>Theme-aware, responsive copy markup component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -48,7 +48,7 @@ page CopyMarkupDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-copy-markup-size"><span><strong>size</strong><small>string</small></span><select id="playground-copy-markup-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-copy-markup-color"><span><strong>color</strong><small>string</small></span><select id="playground-copy-markup-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-copy-markup-label"><span><strong>label</strong><small>string</small></span><input id="playground-copy-markup-label" name="pg_label" type="text" value="Copy Markup" /></label><label class="playground-field" for="playground-copy-markup-name"><span><strong>name</strong><small>string</small></span><input id="playground-copy-markup-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-copy-markup-value"><span><strong>value</strong><small>string</small></span><input id="playground-copy-markup-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-copy-markup-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-copy-markup-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-copy-markup-type"><span><strong>type</strong><small>string</small></span><input id="playground-copy-markup-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-copy-markup-min"><span><strong>min</strong><small>string</small></span><input id="playground-copy-markup-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-copy-markup-max"><span><strong>max</strong><small>string</small></span><input id="playground-copy-markup-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-copy-markup-step"><span><strong>step</strong><small>string</small></span><input id="playground-copy-markup-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-copy-markup-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-copy-markup-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-copy-markup-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-copy-markup-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-copy-markup-class"><span><strong>class</strong><small>string</small></span><input id="playground-copy-markup-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-copy-markup-size"><span><strong>size</strong><small>string</small></span><select id="playground-copy-markup-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-copy-markup-color"><span><strong>color</strong><small>string</small></span><select id="playground-copy-markup-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-copy-markup-label"><span><strong>label</strong><small>string</small></span><input id="playground-copy-markup-label" name="pg_label" type="text" value="Copy Markup" /></label><label class="playground-field" for="playground-copy-markup-name"><span><strong>name</strong><small>string</small></span><input id="playground-copy-markup-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-copy-markup-value"><span><strong>value</strong><small>string</small></span><input id="playground-copy-markup-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-copy-markup-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-copy-markup-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-copy-markup-type"><span><strong>type</strong><small>string</small></span><input id="playground-copy-markup-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-copy-markup-min"><span><strong>min</strong><small>string</small></span><input id="playground-copy-markup-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-copy-markup-max"><span><strong>max</strong><small>string</small></span><input id="playground-copy-markup-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-copy-markup-step"><span><strong>step</strong><small>string</small></span><input id="playground-copy-markup-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-copy-markup-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-copy-markup-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-copy-markup-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-copy-markup-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-copy-markup-class"><span><strong>class</strong><small>string</small></span><input id="playground-copy-markup-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -116,11 +116,15 @@ page CopyMarkupDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('copy', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Copy Markup"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Copy Markup"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#copy-markup-demo-1">Production default</a><a href="#copy-markup-demo-2">Compact application</a><a href="#copy-markup-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#copy-markup-demo-1">Production default</a><a href="#copy-markup-demo-2">Compact application</a><a href="#copy-markup-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ page CustomScrollbarDetail {
|
|||||||
<span class="showcase-eyebrow">Layout component</span>
|
<span class="showcase-eyebrow">Layout component</span>
|
||||||
<h1>Custom Scrollbar</h1>
|
<h1>Custom Scrollbar</h1>
|
||||||
<p>Theme-aware, responsive custom scrollbar component.</p>
|
<p>Theme-aware, responsive custom scrollbar component.</p>
|
||||||
<div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>6 props</span><span>1 slots</span><span>1 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -38,7 +38,7 @@ page CustomScrollbarDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-custom-scrollbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-custom-scrollbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-custom-scrollbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-custom-scrollbar-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-custom-scrollbar-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-custom-scrollbar-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-custom-scrollbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-custom-scrollbar-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-custom-scrollbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-custom-scrollbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-custom-scrollbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-custom-scrollbar-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-custom-scrollbar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-custom-scrollbar-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-custom-scrollbar-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-custom-scrollbar-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-custom-scrollbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-custom-scrollbar-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-custom-scrollbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-custom-scrollbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -97,11 +97,15 @@ page CustomScrollbarDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@scroll</code><span>Fires when the component emits the scroll event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('scroll', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#custom-scrollbar-demo-1">Production default</a><a href="#custom-scrollbar-demo-2">Compact application</a><a href="#custom-scrollbar-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#custom-scrollbar-demo-1">Production default</a><a href="#custom-scrollbar-demo-2">Compact application</a><a href="#custom-scrollbar-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page DataMapDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Data Map</h1>
|
<h1>Data Map</h1>
|
||||||
<p>Theme-aware, responsive data map component.</p>
|
<p>Theme-aware, responsive data map component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page DataMapDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-data-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-data-map-title" name="pg_title" type="text" value="Data Map example" /></label><label class="playground-field" for="playground-data-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-map-description" name="pg_description" type="text" value="A polished default data map for a modern application." /></label><label class="playground-field" for="playground-data-map-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-data-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-data-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-data-map-title" name="pg_title" type="text" value="Data Map example" /></label><label class="playground-field" for="playground-data-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-map-description" name="pg_description" type="text" value="A polished default data map for a modern application." /></label><label class="playground-field" for="playground-data-map-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-data-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "data-map-0-1",
|
"id": "data-map-0-1",
|
||||||
"key": "data-map-0-1",
|
"key": "data-map-0-1",
|
||||||
@@ -649,11 +649,15 @@ page DataMapDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('select', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Data Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Data Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#data-map-demo-1">Production default</a><a href="#data-map-demo-2">Compact application</a><a href="#data-map-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#data-map-demo-1">Production default</a><a href="#data-map-demo-2">Compact application</a><a href="#data-map-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page DataTableDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Data Table</h1>
|
<h1>Data Table</h1>
|
||||||
<p>Theme-aware, responsive data table component.</p>
|
<p>Theme-aware, responsive data table component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -256,7 +256,7 @@ page DataTableDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-data-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-table-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-table-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-table-caption"><span><strong>caption</strong><small>string</small></span><input id="playground-data-table-caption" name="pg_caption" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-columns"><span><strong>columns</strong><small>string</small></span><textarea id="playground-data-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-data-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-table-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-table-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-table-caption"><span><strong>caption</strong><small>string</small></span><input id="playground-data-table-caption" name="pg_caption" type="text" value="Data Table" /></label><label class="playground-field" for="playground-data-table-columns"><span><strong>columns</strong><small>string</small></span><textarea id="playground-data-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "data-table-0-1",
|
"id": "data-table-0-1",
|
||||||
"key": "data-table-0-1",
|
"key": "data-table-0-1",
|
||||||
@@ -1178,11 +1178,15 @@ page DataTableDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@sort</code><span>Fires when the component emits the sort event.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@rowClick</code><span>Fires when the component emits the row Click event.</span></div><div><code>@pageChange</code><span>Fires when the component emits the page Change event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('sort', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>caption</code></td><td>string</td><td><code>"Data Table"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>rows</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>striped</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>caption</code></td><td>string</td><td><code>"Data Table"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>rows</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>striped</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#data-table-demo-1">Production default</a><a href="#data-table-demo-2">Compact application</a><a href="#data-table-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#data-table-demo-1">Production default</a><a href="#data-table-demo-2">Compact application</a><a href="#data-table-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -4,13 +4,25 @@ page DatePickerDetail {
|
|||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Date Picker"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Date Picker"
|
||||||
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "date"
|
state playground_type = ctx.url.searchParams.get("pg_type") ?? "date"
|
||||||
|
state playground_locale = ctx.url.searchParams.get("pg_locale") ?? "en-US"
|
||||||
|
state playground_firstDayOfWeek = ctx.url.searchParams.get("pg_firstDayOfWeek") ?? "0"
|
||||||
|
state playground_months = ctx.url.searchParams.get("pg_months") ?? ""
|
||||||
|
state playground_days = ctx.url.searchParams.get("pg_days") ?? ""
|
||||||
|
state playground_years = ctx.url.searchParams.get("pg_years") ?? ""
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
||||||
|
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") ?? ""
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||||
@@ -27,7 +39,7 @@ page DatePickerDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Date Picker</h1>
|
<h1>Date Picker</h1>
|
||||||
<p>Theme-aware, responsive date picker component.</p>
|
<p>Theme-aware, responsive date picker component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>25 props</span><span>0 slots</span><span>7 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,7 +48,7 @@ page DatePickerDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="DatePicker" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="DatePicker" size="{playground_size}" color="{playground_color}" label="{playground_label}" id="{playground_id}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" locale="{playground_locale}" firstDayOfWeek="{playground_firstDayOfWeek}" months="{playground_months}" days="{playground_days}" years="{playground_years}" min="{playground_min}" max="{playground_max}" step="{playground_step}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" variant="{playground_variant}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><DatePicker
|
<pre><code data-playground-code><DatePicker
|
||||||
@@ -47,8 +59,8 @@ page DatePickerDetail {
|
|||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-date-picker-type" name="pg_type" type="text" value="date" /></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-date-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-date-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-date-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-date-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-date-picker-label" name="pg_label" type="text" value="Date Picker" /></label><label class="playground-field" for="playground-date-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-date-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-date-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-date-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-date-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-date-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-date-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-date-picker-type" name="pg_type" type="text" value="date" /></label><label class="playground-field" for="playground-date-picker-locale"><span><strong>locale</strong><small>string</small></span><input id="playground-date-picker-locale" name="pg_locale" type="text" value="en-US" /></label><label class="playground-field" for="playground-date-picker-firstDayOfWeek"><span><strong>first Day Of Week</strong><small>number</small></span><input id="playground-date-picker-firstDayOfWeek" name="pg_firstDayOfWeek" type="number" value="0" /></label><label class="playground-field" for="playground-date-picker-months"><span><strong>months</strong><small>string</small></span><input id="playground-date-picker-months" name="pg_months" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-days"><span><strong>days</strong><small>string</small></span><input id="playground-date-picker-days" name="pg_days" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-years"><span><strong>years</strong><small>string</small></span><input id="playground-date-picker-years" name="pg_years" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-date-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-date-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-date-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-date-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-date-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-date-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-field" for="playground-date-picker-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-date-picker-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">dLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -63,7 +75,7 @@ page DatePickerDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="date-picker-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="date-picker-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="DatePicker" size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="DatePicker" size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Production default usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
@@ -82,7 +94,7 @@ page DatePickerDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="date-picker-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="date-picker-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="DatePicker" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="DatePicker" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" firstDayOfWeek="0" variant="secondary" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Compact application usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
@@ -91,6 +103,7 @@ page DatePickerDetail {
|
|||||||
label="Compact example"
|
label="Compact example"
|
||||||
value="sample-2"
|
value="sample-2"
|
||||||
placeholder="Enter a sample value"
|
placeholder="Enter a sample value"
|
||||||
|
variant="secondary"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -103,7 +116,7 @@ page DatePickerDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="date-picker-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="date-picker-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="DatePicker" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="DatePicker" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" firstDayOfWeek="0" variant="success" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Rich configuration usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
@@ -112,15 +125,20 @@ page DatePickerDetail {
|
|||||||
label="Advanced example"
|
label="Advanced example"
|
||||||
value="sample-3"
|
value="sample-3"
|
||||||
placeholder="Search by name, email, or identifier"
|
placeholder="Search by name, email, or identifier"
|
||||||
|
variant="success"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Date Picker"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"date"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Date Picker"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"date"</code></td><td>No</td></tr><tr><td><code>locale</code></td><td>string</td><td><code>"en-US"</code></td><td>No</td></tr><tr><td><code>firstDayOfWeek</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>months</code></td><td>string</td><td><code>[{ 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" }]</code></td><td>No</td></tr><tr><td><code>days</code></td><td>string</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td><td>No</td></tr><tr><td><code>years</code></td><td>string</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#date-picker-demo-1">Production default</a><a href="#date-picker-demo-2">Compact application</a><a href="#date-picker-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#date-picker-demo-1">Production default</a><a href="#date-picker-demo-2">Compact application</a><a href="#date-picker-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -7,6 +7,13 @@ page DeviceFrameDetail {
|
|||||||
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default device frame for a modern application."
|
state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default device frame for a modern application."
|
||||||
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"device-frame-0-1\",\n \"key\": \"device-frame-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#device-frame-demo\",\n \"actionHref\": \"#device-frame-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"device-frame-0-2\",\n \"key\": \"device-frame-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#device-frame-demo\",\n \"actionHref\": \"#device-frame-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"device-frame-0-1\",\n \"key\": \"device-frame-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#device-frame-demo\",\n \"actionHref\": \"#device-frame-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"device-frame-0-2\",\n \"key\": \"device-frame-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#device-frame-demo\",\n \"actionHref\": \"#device-frame-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
||||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
||||||
|
state playground_device = ctx.url.searchParams.get("pg_device") ?? "phone"
|
||||||
|
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "portrait"
|
||||||
|
state playground_src = ctx.url.searchParams.get("pg_src") ?? ""
|
||||||
|
state playground_srcdoc = ctx.url.searchParams.get("pg_srcdoc") ?? ""
|
||||||
|
state playground_frameTitle = ctx.url.searchParams.get("pg_frameTitle") ?? "Device Frame example"
|
||||||
|
state playground_showToolbar = ctx.url.searchParams.get("pg_showToolbar") ?? "true"
|
||||||
|
state playground_allow = ctx.url.searchParams.get("pg_allow") ?? ""
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||||
seo {
|
seo {
|
||||||
title = "Device Frame"
|
title = "Device Frame"
|
||||||
@@ -21,7 +28,7 @@ page DeviceFrameDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Device Frame</h1>
|
<h1>Device Frame</h1>
|
||||||
<p>Theme-aware, responsive device frame component.</p>
|
<p>Theme-aware, responsive device frame component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>14 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -30,7 +37,7 @@ page DeviceFrameDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="DeviceFrame" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="DeviceFrame" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" device="{playground_device}" orientation="{playground_orientation}" src="{playground_src}" srcdoc="{playground_srcdoc}" frameTitle="{playground_frameTitle}" showToolbar="{playground_showToolbar}" allow="{playground_allow}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><DeviceFrame
|
<pre><code data-playground-code><DeviceFrame
|
||||||
@@ -144,13 +151,14 @@ page DeviceFrameDetail {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
frameTitle="Device Frame example"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-device-frame-size"><span><strong>size</strong><small>string</small></span><select id="playground-device-frame-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-device-frame-color"><span><strong>color</strong><small>string</small></span><select id="playground-device-frame-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-device-frame-title"><span><strong>title</strong><small>string</small></span><input id="playground-device-frame-title" name="pg_title" type="text" value="Device Frame example" /></label><label class="playground-field" for="playground-device-frame-description"><span><strong>description</strong><small>string</small></span><input id="playground-device-frame-description" name="pg_description" type="text" value="A polished default device frame for a modern application." /></label><label class="playground-field" for="playground-device-frame-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-device-frame-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-device-frame-size"><span><strong>size</strong><small>string</small></span><select id="playground-device-frame-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-device-frame-color"><span><strong>color</strong><small>string</small></span><select id="playground-device-frame-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-device-frame-title"><span><strong>title</strong><small>string</small></span><input id="playground-device-frame-title" name="pg_title" type="text" value="Device Frame example" /></label><label class="playground-field" for="playground-device-frame-description"><span><strong>description</strong><small>string</small></span><input id="playground-device-frame-description" name="pg_description" type="text" value="A polished default device frame for a modern application." /></label><label class="playground-field" for="playground-device-frame-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-device-frame-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "device-frame-0-1",
|
"id": "device-frame-0-1",
|
||||||
"key": "device-frame-0-1",
|
"key": "device-frame-0-1",
|
||||||
@@ -257,7 +265,7 @@ page DeviceFrameDetail {
|
|||||||
"Standard"
|
"Standard"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-device-frame-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-device-frame-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-device-frame-class"><span><strong>class</strong><small>string</small></span><input id="playground-device-frame-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-device-frame-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-device-frame-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-device-frame-device"><span><strong>device</strong><small>string</small></span><input id="playground-device-frame-device" name="pg_device" type="text" value="phone" /></label><label class="playground-field" for="playground-device-frame-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-device-frame-orientation" name="pg_orientation"><option value="portrait" selected>portrait</option><option value="horizontal">horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-device-frame-src"><span><strong>src</strong><small>string</small></span><input id="playground-device-frame-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-srcdoc"><span><strong>srcdoc</strong><small>string</small></span><input id="playground-device-frame-srcdoc" name="pg_srcdoc" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-frameTitle"><span><strong>frame Title</strong><small>string</small></span><input id="playground-device-frame-frameTitle" name="pg_frameTitle" type="text" value="Device Frame example" /></label><label class="playground-toggle" for="playground-device-frame-showToolbar"><span><strong>show Toolbar</strong><small>boolean</small></span><input id="playground-device-frame-showToolbar" name="pg_showToolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-device-frame-allow"><span><strong>allow</strong><small>string</small></span><input id="playground-device-frame-allow" name="pg_allow" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-class"><span><strong>class</strong><small>string</small></span><input id="playground-device-frame-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -272,7 +280,7 @@ page DeviceFrameDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="device-frame-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="device-frame-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="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" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="DeviceFrame" size="default" title="Device Frame example" description="A polished default device frame for a modern application." items="[{"id":"device-frame-0-1","key":"device-frame-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"device-frame-0-2","key":"device-frame-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Production default usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
@@ -387,6 +395,7 @@ page DeviceFrameDetail {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
|
frameTitle="Device Frame example"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -399,7 +408,7 @@ page DeviceFrameDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="device-frame-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="device-frame-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="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" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="DeviceFrame" size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items="[{"id":"device-frame-1-1","key":"device-frame-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"device-frame-1-2","key":"device-frame-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]" variant="secondary" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Compact application usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
@@ -516,6 +525,7 @@ page DeviceFrameDetail {
|
|||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
|
frameTitle="Compact Device Frame"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -528,7 +538,7 @@ page DeviceFrameDetail {
|
|||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="device-frame-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="device-frame-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="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" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="DeviceFrame" size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items="[{"id":"device-frame-2-1","key":"device-frame-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"device-frame-2-2","key":"device-frame-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]" variant="success" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Rich configuration usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
@@ -645,15 +655,20 @@ page DeviceFrameDetail {
|
|||||||
}
|
}
|
||||||
]'
|
]'
|
||||||
variant="success"
|
variant="success"
|
||||||
|
frameTitle="Advanced Device Frame"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@rotate</code><span>Fires when the component emits the rotate event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Device Frame"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('change', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Device Frame"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>device</code></td><td>string</td><td><code>"phone"</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"portrait"</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>srcdoc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>frameTitle</code></td><td>string</td><td><code>"Device preview"</code></td><td>No</td></tr><tr><td><code>showToolbar</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#device-frame-demo-1">Production default</a><a href="#device-frame-demo-2">Compact application</a><a href="#device-frame-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#device-frame-demo-1">Production default</a><a href="#device-frame-demo-2">Compact application</a><a href="#device-frame-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ page DividerDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<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>
|
<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>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-divider-size"><span><strong>size</strong><small>string</small></span><select id="playground-divider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-divider-color"><span><strong>color</strong><small>string</small></span><select id="playground-divider-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-divider-label"><span><strong>label</strong><small>string</small></span><input id="playground-divider-label" name="pg_label" type="text" value="Divider" /></label><label class="playground-field" for="playground-divider-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-divider-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-divider-class"><span><strong>class</strong><small>string</small></span><input id="playground-divider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-divider-size"><span><strong>size</strong><small>string</small></span><select id="playground-divider-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-divider-color"><span><strong>color</strong><small>string</small></span><select id="playground-divider-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-divider-label"><span><strong>label</strong><small>string</small></span><input id="playground-divider-label" name="pg_label" type="text" value="Divider" /></label><label class="playground-field" for="playground-divider-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-divider-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-divider-class"><span><strong>class</strong><small>string</small></span><input id="playground-divider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -102,11 +102,11 @@ page DividerDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#divider-demo-1">Production default</a><a href="#divider-demo-2">Compact application</a><a href="#divider-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#divider-demo-1">Production default</a><a href="#divider-demo-2">Compact application</a><a href="#divider-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page DragAndDropDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Drag And Drop</h1>
|
<h1>Drag And Drop</h1>
|
||||||
<p>Theme-aware, responsive drag and drop component.</p>
|
<p>Theme-aware, responsive drag and drop component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>6 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page DragAndDropDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-drag-and-drop-size"><span><strong>size</strong><small>string</small></span><select id="playground-drag-and-drop-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-drag-and-drop-color"><span><strong>color</strong><small>string</small></span><select id="playground-drag-and-drop-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-drag-and-drop-title"><span><strong>title</strong><small>string</small></span><input id="playground-drag-and-drop-title" name="pg_title" type="text" value="Drag And Drop example" /></label><label class="playground-field" for="playground-drag-and-drop-description"><span><strong>description</strong><small>string</small></span><input id="playground-drag-and-drop-description" name="pg_description" type="text" value="A polished default drag and drop for a modern application." /></label><label class="playground-field" for="playground-drag-and-drop-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-drag-and-drop-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-drag-and-drop-size"><span><strong>size</strong><small>string</small></span><select id="playground-drag-and-drop-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-drag-and-drop-color"><span><strong>color</strong><small>string</small></span><select id="playground-drag-and-drop-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-drag-and-drop-title"><span><strong>title</strong><small>string</small></span><input id="playground-drag-and-drop-title" name="pg_title" type="text" value="Drag And Drop example" /></label><label class="playground-field" for="playground-drag-and-drop-description"><span><strong>description</strong><small>string</small></span><input id="playground-drag-and-drop-description" name="pg_description" type="text" value="A polished default drag and drop for a modern application." /></label><label class="playground-field" for="playground-drag-and-drop-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-drag-and-drop-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "drag-and-drop-0-1",
|
"id": "drag-and-drop-0-1",
|
||||||
"key": "drag-and-drop-0-1",
|
"key": "drag-and-drop-0-1",
|
||||||
@@ -649,11 +649,15 @@ page DragAndDropDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dragStart</code><span>Fires when the component emits the drag Start event.</span></div><div><code>@dragEnd</code><span>Fires when the component emits the drag End event.</span></div><div><code>@dragEnter</code><span>Fires when the component emits the drag Enter event.</span></div><div><code>@dragLeave</code><span>Fires when the component emits the drag Leave event.</span></div><div><code>@drop</code><span>Fires when the component emits the drop event.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('dragStart', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Drag And Drop"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Drag And Drop"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drag-and-drop-demo-1">Production default</a><a href="#drag-and-drop-demo-2">Compact application</a><a href="#drag-and-drop-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drag-and-drop-demo-1">Production default</a><a href="#drag-and-drop-demo-2">Compact application</a><a href="#drag-and-drop-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ page DrawerDetail {
|
|||||||
<span class="showcase-eyebrow">Overlays component</span>
|
<span class="showcase-eyebrow">Overlays component</span>
|
||||||
<h1>Drawer</h1>
|
<h1>Drawer</h1>
|
||||||
<p>Theme-aware, responsive drawer component.</p>
|
<p>Theme-aware, responsive drawer component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -45,7 +45,7 @@ page DrawerDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-drawer-size"><span><strong>size</strong><small>string</small></span><select id="playground-drawer-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-drawer-color"><span><strong>color</strong><small>string</small></span><select id="playground-drawer-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-drawer-title"><span><strong>title</strong><small>string</small></span><input id="playground-drawer-title" name="pg_title" type="text" value="Drawer example" /></label><label class="playground-field" for="playground-drawer-description"><span><strong>description</strong><small>string</small></span><input id="playground-drawer-description" name="pg_description" type="text" value="A polished default drawer for a modern application." /></label><label class="playground-toggle" for="playground-drawer-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-drawer-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-drawer-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-drawer-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-drawer-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-drawer-closeLabel" name="pg_closeLabel" type="text" value="Drawer" /></label><label class="playground-field" for="playground-drawer-class"><span><strong>class</strong><small>string</small></span><input id="playground-drawer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-drawer-size"><span><strong>size</strong><small>string</small></span><select id="playground-drawer-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-drawer-color"><span><strong>color</strong><small>string</small></span><select id="playground-drawer-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-drawer-title"><span><strong>title</strong><small>string</small></span><input id="playground-drawer-title" name="pg_title" type="text" value="Drawer example" /></label><label class="playground-field" for="playground-drawer-description"><span><strong>description</strong><small>string</small></span><input id="playground-drawer-description" name="pg_description" type="text" value="A polished default drawer for a modern application." /></label><label class="playground-toggle" for="playground-drawer-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-drawer-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-drawer-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-drawer-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-drawer-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-drawer-closeLabel" name="pg_closeLabel" type="text" value="Drawer" /></label><label class="playground-field" for="playground-drawer-class"><span><strong>class</strong><small>string</small></span><input id="playground-drawer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -117,11 +117,15 @@ page DrawerDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('open', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Drawer"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawer-demo-1">Production default</a><a href="#drawer-demo-2">Compact application</a><a href="#drawer-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#drawer-demo-1">Production default</a><a href="#drawer-demo-2">Compact application</a><a href="#drawer-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ page DropdownDetail {
|
|||||||
<span class="showcase-eyebrow">Overlays component</span>
|
<span class="showcase-eyebrow">Overlays component</span>
|
||||||
<h1>Dropdown</h1>
|
<h1>Dropdown</h1>
|
||||||
<p>Theme-aware, responsive dropdown component.</p>
|
<p>Theme-aware, responsive dropdown component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -45,7 +45,7 @@ page DropdownDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-dropdown-title"><span><strong>title</strong><small>string</small></span><input id="playground-dropdown-title" name="pg_title" type="text" value="Dropdown example" /></label><label class="playground-field" for="playground-dropdown-description"><span><strong>description</strong><small>string</small></span><input id="playground-dropdown-description" name="pg_description" type="text" value="A polished default dropdown for a modern application." /></label><label class="playground-toggle" for="playground-dropdown-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-dropdown-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-dropdown-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-dropdown-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-dropdown-closeLabel" name="pg_closeLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-class"><span><strong>class</strong><small>string</small></span><input id="playground-dropdown-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-dropdown-size"><span><strong>size</strong><small>string</small></span><select id="playground-dropdown-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-dropdown-color"><span><strong>color</strong><small>string</small></span><select id="playground-dropdown-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-dropdown-title"><span><strong>title</strong><small>string</small></span><input id="playground-dropdown-title" name="pg_title" type="text" value="Dropdown example" /></label><label class="playground-field" for="playground-dropdown-description"><span><strong>description</strong><small>string</small></span><input id="playground-dropdown-description" name="pg_description" type="text" value="A polished default dropdown for a modern application." /></label><label class="playground-toggle" for="playground-dropdown-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-dropdown-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-dropdown-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-dropdown-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-dropdown-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-dropdown-closeLabel" name="pg_closeLabel" type="text" value="Dropdown" /></label><label class="playground-field" for="playground-dropdown-class"><span><strong>class</strong><small>string</small></span><input id="playground-dropdown-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -117,11 +117,15 @@ page DropdownDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('open', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Dropdown"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Dropdown"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#dropdown-demo-1">Production default</a><a href="#dropdown-demo-2">Compact application</a><a href="#dropdown-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#dropdown-demo-1">Production default</a><a href="#dropdown-demo-2">Compact application</a><a href="#dropdown-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,17 +3,25 @@ page FileInputDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Input"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "file-input-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "file-inputField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Profile image"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "file"
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Choose an image"
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_accept = ctx.url.searchParams.get("pg_accept") ?? "image/png,image/jpeg"
|
||||||
|
state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "File Input"
|
title = "File Input"
|
||||||
description = "Theme-aware, responsive file input component."
|
description = "Theme-aware, responsive file input component."
|
||||||
@@ -27,7 +35,7 @@ page FileInputDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>File Input</h1>
|
<h1>File Input</h1>
|
||||||
<p>Theme-aware, responsive file input component.</p>
|
<p>Theme-aware, responsive file input component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>21 props</span><span>0 slots</span><span>7 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,19 +44,23 @@ page FileInputDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="FileInput" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="FileInput" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" value="{playground_value}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" accept="{playground_accept}" multiple="{playground_multiple}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" variant="{playground_variant}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><FileInput
|
<pre><code data-playground-code><FileInput
|
||||||
value="sample-1"
|
id="file-input-1"
|
||||||
placeholder="Enter a sample value"
|
name="file-inputField"
|
||||||
|
label="Profile image"
|
||||||
|
placeholder="Choose an image"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>21 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-file-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-input-label" name="pg_label" type="text" value="File Input" /></label><label class="playground-field" for="playground-file-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-file-input-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-file-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-file-input-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-file-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-file-input-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-file-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-file-input-type" name="pg_type" type="text" value="file" /></label><label class="playground-field" for="playground-file-input-min"><span><strong>min</strong><small>string</small></span><input id="playground-file-input-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-file-input-max"><span><strong>max</strong><small>string</small></span><input id="playground-file-input-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-file-input-step"><span><strong>step</strong><small>string</small></span><input id="playground-file-input-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-file-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-file-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-file-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-file-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-input-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-file-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-file-input-id" name="pg_id" type="text" value="file-input-1" /></label><label class="playground-field" for="playground-file-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-file-input-name" name="pg_name" type="text" value="file-inputField" /></label><label class="playground-field" for="playground-file-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-input-label" name="pg_label" type="text" value="Profile image" /></label><label class="playground-toggle" for="playground-file-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-file-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-file-input-placeholder" name="pg_placeholder" type="text" value="Choose an image" /></label><label class="playground-field" for="playground-file-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-file-input-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-file-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-file-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-file-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-file-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-file-input-accept"><span><strong>accept</strong><small>string</small></span><input id="playground-file-input-accept" name="pg_accept" type="text" value="image/png,image/jpeg" /></label><label class="playground-toggle" for="playground-file-input-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-file-input-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-file-input-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-file-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-file-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-file-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-file-input-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-file-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-file-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-file-input-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-toggle" for="playground-file-input-readonly"><span><strongLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,70 +69,225 @@ page FileInputDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="file-input-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="file-input-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="FileInput" size="default" label="File Input" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="FileInput" size="default" color="primary" id="file-input-1" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><FileInput
|
<pre><code><FileInput
|
||||||
value="sample-1"
|
id="file-input-1"
|
||||||
placeholder="Enter a sample value"
|
name="file-inputField"
|
||||||
|
label="Profile image"
|
||||||
|
placeholder="Choose an image"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="file-input-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="file-input-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="FileInput" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="FileInput" size="default" color="primary" id="file-input-2" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="icon-[lucide--sparkles]" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="outlined" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><FileInput
|
<pre><code><FileInput
|
||||||
size="sm"
|
id="file-input-2"
|
||||||
label="Compact example"
|
name="file-inputField"
|
||||||
value="sample-2"
|
label="Profile image"
|
||||||
placeholder="Enter a sample value"
|
placeholder="Choose an image"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
variant="outlined"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="file-input-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="file-input-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="FileInput" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="FileInput" size="default" color="primary" id="file-input-3" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="icon-[lucide--circle-user-round]" iconPosition="end" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="floating" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><FileInput
|
<pre><code><FileInput
|
||||||
size="lg"
|
id="file-input-3"
|
||||||
label="Advanced example"
|
name="file-inputField"
|
||||||
value="sample-3"
|
label="Profile image"
|
||||||
placeholder="Search by name, email, or identifier"
|
placeholder="Choose an image"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
variant="floating"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-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"><div data-component="FileInput" size="sm" color="primary" id="file-input-4" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="pill" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileInput
|
||||||
|
size="sm"
|
||||||
|
id="file-input-4"
|
||||||
|
name="file-inputField"
|
||||||
|
label="Profile image"
|
||||||
|
placeholder="Choose an image"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
variant="pill"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-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"><div data-component="FileInput" size="default" color="primary" id="file-input-5" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileInput
|
||||||
|
id="file-input-5"
|
||||||
|
name="file-inputField"
|
||||||
|
label="Profile image"
|
||||||
|
placeholder="Choose an image"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-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"><div data-component="FileInput" size="default" color="primary" id="file-input-6" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="true" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileInput
|
||||||
|
id="file-input-6"
|
||||||
|
name="file-inputField"
|
||||||
|
label="Profile image"
|
||||||
|
placeholder="Choose an image"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-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"><div data-component="FileInput" size="default" color="primary" id="file-input-7" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="We'll never share your details." cornerHint="" error="" inline="true" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileInput
|
||||||
|
id="file-input-7"
|
||||||
|
name="file-inputField"
|
||||||
|
label="Profile image"
|
||||||
|
placeholder="Choose an image"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-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"><div data-component="FileInput" size="default" color="primary" id="file-input-8" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="Optional" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileInput
|
||||||
|
id="file-input-8"
|
||||||
|
name="file-inputField"
|
||||||
|
label="Profile image"
|
||||||
|
placeholder="Choose an image"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
cornerHint="Optional"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="FileInput" size="default" color="primary" id="file-input-9" name="validatedField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileInput
|
||||||
|
id="file-input-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Profile image"
|
||||||
|
placeholder="Choose an image"
|
||||||
|
accept="image/png,image/jpeg"
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"File Input"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"file"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"File"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Choose a file"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--upload]"</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>accept</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-input-demo-1">Production default</a><a href="#file-input-demo-2">Compact application</a><a href="#file-input-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-input-demo-1">Default field</a><a href="#file-input-demo-2">Outlined with start icon</a><a href="#file-input-demo-3">Floating label</a><a href="#file-input-demo-4">Pill and compact size</a><a href="#file-input-demo-5">Read only</a><a href="#file-input-demo-6">Disabled</a><a href="#file-input-demo-7">Inline helper text</a><a href="#file-input-demo-8">Field with corner hint</a><a href="#file-input-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,10 +3,16 @@ page FileUploadProgressDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Upload Progress"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Uploading archive"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "36"
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? "42"
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
|
state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
|
||||||
state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
|
state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
|
||||||
|
state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? "design-system.zip"
|
||||||
|
state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? "20 MB"
|
||||||
|
state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? "8.4 MB"
|
||||||
|
state playground_status = ctx.url.searchParams.get("pg_status") ?? "uploading"
|
||||||
|
state playground_cancelLabel = ctx.url.searchParams.get("pg_cancelLabel") ?? "File Upload Progress"
|
||||||
|
state playground_retryLabel = ctx.url.searchParams.get("pg_retryLabel") ?? "File Upload Progress"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||||
seo {
|
seo {
|
||||||
title = "File Upload Progress"
|
title = "File Upload Progress"
|
||||||
@@ -21,7 +27,7 @@ page FileUploadProgressDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>File Upload Progress</h1>
|
<h1>File Upload Progress</h1>
|
||||||
<p>Theme-aware, responsive file upload progress component.</p>
|
<p>Theme-aware, responsive file upload progress component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -30,19 +36,24 @@ page FileUploadProgressDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="FileUploadProgress" size="{playground_size}" color="{playground_color}" label="{playground_label}" value="{playground_value}" max="{playground_max}" showValue="{playground_showValue}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="FileUploadProgress" size="{playground_size}" color="{playground_color}" label="{playground_label}" value="{playground_value}" max="{playground_max}" showValue="{playground_showValue}" fileName="{playground_fileName}" fileSize="{playground_fileSize}" uploadedSize="{playground_uploadedSize}" status="{playground_status}" cancelLabel="{playground_cancelLabel}" retryLabel="{playground_retryLabel}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><FileUploadProgress
|
<pre><code data-playground-code><FileUploadProgress
|
||||||
label="File Upload Progress"
|
label="Uploading archive"
|
||||||
value="36"
|
value="42"
|
||||||
|
fileName="design-system.zip"
|
||||||
|
fileSize="20 MB"
|
||||||
|
uploadedSize="8.4 MB"
|
||||||
|
cancelLabel="File Upload Progress"
|
||||||
|
retryLabel="File Upload Progress"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-file-upload-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-upload-progress-label" name="pg_label" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-file-upload-progress-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-file-upload-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-file-upload-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-file-upload-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-file-upload-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-progress-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-file-upload-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-upload-progress-label" name="pg_label" type="text" value="Uploading archive" /></label><label class="playground-field" for="playground-file-upload-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-file-upload-progress-value" name="pg_value" type="number" value="42" /></label><label class="playground-field" for="playground-file-upload-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-file-upload-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-file-upload-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-file-upload-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-fileName"><span><strong>file Name</strong><small>string</small></span><input id="playground-file-upload-progress-fileName" name="pg_fileName" type="text" value="design-system.zip" /></label><label class="playground-field" for="playground-file-upload-progress-fileSize"><span><strong>file Size</strong><small>string</small></span><input id="playground-file-upload-progress-fileSize" name="pg_fileSize" type="text" value="20 MB" /></label><label class="playground-field" for="playground-file-upload-progress-uploadedSize"><span><strong>uploaded Size</strong><small>string</small></span><input id="playground-file-upload-progress-uploadedSize" name="pg_uploadedSize" type="text" value="8.4 MB" /></label><label class="playground-field" for="playground-file-upload-progress-status"><span><strong>status</strong><small>string</small></span><input id="playground-file-upload-progress-status" name="pg_status" type="text" value="uploading" /></label><label class="playground-field" for="playground-file-upload-progress-cancelLabel"><span><strong>cancel Label</strong><small>string</small></span><input id="playground-file-upload-progress-cancelLabel" name="pg_cancelLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-file-upload-progress-retryLabel" name="pg_retryLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-progress-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -51,68 +62,165 @@ page FileUploadProgressDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Uploading file</h2><p>Show an active upload with file metadata and a cancel action.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="file-upload-progress-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="file-upload-progress-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="FileUploadProgress" size="default" label="File Upload Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="FileUploadProgress" size="default" label="Uploading archive" value="42" max="100" showValue="true" fileName="design-system.zip" fileSize="20 MB" uploadedSize="8.4 MB" status="uploading" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Uploading file usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><FileUploadProgress
|
<pre><code><FileUploadProgress
|
||||||
label="File Upload Progress"
|
label="Uploading archive"
|
||||||
value="36"
|
value="42"
|
||||||
|
fileName="design-system.zip"
|
||||||
|
fileSize="20 MB"
|
||||||
|
uploadedSize="8.4 MB"
|
||||||
|
cancelLabel="File Upload Progress"
|
||||||
|
retryLabel="File Upload Progress"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Progress</span><h2>Starting upload</h2><p>Communicate that a newly queued file has begun uploading.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="file-upload-progress-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="file-upload-progress-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="FileUploadProgress" size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="FileUploadProgress" size="sm" label="Preparing upload" value="2" max="100" showValue="true" fileName="product-images.tar" fileSize="48 MB" uploadedSize="640 KB" status="uploading" cancelLabel="Compact example" retryLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Starting upload usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><FileUploadProgress
|
<pre><code><FileUploadProgress
|
||||||
size="sm"
|
size="sm"
|
||||||
label="Compact example"
|
label="Preparing upload"
|
||||||
value="60"
|
value="2"
|
||||||
|
fileName="product-images.tar"
|
||||||
|
fileSize="48 MB"
|
||||||
|
uploadedSize="640 KB"
|
||||||
|
cancelLabel="Compact example"
|
||||||
|
retryLabel="Compact example"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Progress</span><h2>Nearly complete</h2><p>Keep progress and transferred size readable near completion.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="file-upload-progress-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="file-upload-progress-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Uploading video" value="92" max="100" showValue="true" fileName="launch-video.mp4" fileSize="200 MB" uploadedSize="184 MB" status="uploading" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Nearly complete usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><FileUploadProgress
|
<pre><code><FileUploadProgress
|
||||||
size="lg"
|
size="lg"
|
||||||
label="Advanced example"
|
label="Uploading video"
|
||||||
value="84"
|
value="92"
|
||||||
|
fileName="launch-video.mp4"
|
||||||
|
fileSize="200 MB"
|
||||||
|
uploadedSize="184 MB"
|
||||||
|
cancelLabel="Advanced example"
|
||||||
|
retryLabel="Advanced example"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Upload complete</h2><p>Confirm a successful upload with a clear completion state.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-upload-progress-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"><div data-component="FileUploadProgress" size="lg" label="Uploaded successfully" value="100" max="100" showValue="true" fileName="quarterly-report.pdf" fileSize="4.8 MB" uploadedSize="4.8 MB" status="complete" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--4"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Upload complete usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileUploadProgress
|
||||||
|
size="lg"
|
||||||
|
label="Uploaded successfully"
|
||||||
|
value="100"
|
||||||
|
fileName="quarterly-report.pdf"
|
||||||
|
fileSize="4.8 MB"
|
||||||
|
uploadedSize="4.8 MB"
|
||||||
|
status="complete"
|
||||||
|
cancelLabel="Advanced example"
|
||||||
|
retryLabel="Advanced example"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Upload failed</h2><p>Explain failure and provide a retry action.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-upload-progress-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"><div data-component="FileUploadProgress" size="lg" label="Network connection lost" value="33" max="100" showValue="true" fileName="customer-export.csv" fileSize="36 MB" uploadedSize="12 MB" status="error" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--5"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Upload failed usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileUploadProgress
|
||||||
|
size="lg"
|
||||||
|
label="Network connection lost"
|
||||||
|
value="33"
|
||||||
|
fileName="customer-export.csv"
|
||||||
|
fileSize="36 MB"
|
||||||
|
uploadedSize="12 MB"
|
||||||
|
status="error"
|
||||||
|
cancelLabel="Advanced example"
|
||||||
|
retryLabel="Advanced example"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Upload cancelled</h2><p>Preserve file context and allow a cancelled upload to restart.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="file-upload-progress-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"><div data-component="FileUploadProgress" size="lg" label="Upload cancelled" value="22" max="100" showValue="true" fileName="brand-assets.fig" fileSize="72 MB" uploadedSize="16 MB" status="cancelled" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--6"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Upload cancelled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><FileUploadProgress
|
||||||
|
size="lg"
|
||||||
|
label="Upload cancelled"
|
||||||
|
value="22"
|
||||||
|
fileName="brand-assets.fig"
|
||||||
|
fileSize="72 MB"
|
||||||
|
uploadedSize="16 MB"
|
||||||
|
status="cancelled"
|
||||||
|
cancelLabel="Advanced example"
|
||||||
|
retryLabel="Advanced example"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@cancel</code><span>Fires when the current operation is cancelled.</span></div><div><code>@retry</code><span>Fires when the component emits the retry event.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<section id="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>
|
component.addEventListener('cancel', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fileName</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>fileSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>uploadedSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>"uploading"</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel upload"</code></td><td>No</td></tr><tr><td><code>retryLabel</code></td><td>string</td><td><code>"Retry upload"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-progress-demo-1">Production default</a><a href="#file-upload-progress-demo-2">Compact application</a><a href="#file-upload-progress-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-progress-demo-1">Uploading file</a><a href="#file-upload-progress-demo-2">Starting upload</a><a href="#file-upload-progress-demo-3">Nearly complete</a><a href="#file-upload-progress-demo-4">Upload complete</a><a href="#file-upload-progress-demo-5">Upload failed</a><a href="#file-upload-progress-demo-6">Upload cancelled</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page FileUploadDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>File Upload</h1>
|
<h1>File Upload</h1>
|
||||||
<p>Theme-aware, responsive file upload component.</p>
|
<p>Theme-aware, responsive file upload component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>7 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page FileUploadDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-file-upload-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-title"><span><strong>title</strong><small>string</small></span><input id="playground-file-upload-title" name="pg_title" type="text" value="File Upload example" /></label><label class="playground-field" for="playground-file-upload-description"><span><strong>description</strong><small>string</small></span><input id="playground-file-upload-description" name="pg_description" type="text" value="A polished default file upload for a modern application." /></label><label class="playground-field" for="playground-file-upload-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-file-upload-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-file-upload-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-title"><span><strong>title</strong><small>string</small></span><input id="playground-file-upload-title" name="pg_title" type="text" value="File Upload example" /></label><label class="playground-field" for="playground-file-upload-description"><span><strong>description</strong><small>string</small></span><input id="playground-file-upload-description" name="pg_description" type="text" value="A polished default file upload for a modern application." /></label><label class="playground-field" for="playground-file-upload-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-file-upload-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "file-upload-0-1",
|
"id": "file-upload-0-1",
|
||||||
"key": "file-upload-0-1",
|
"key": "file-upload-0-1",
|
||||||
@@ -649,11 +649,15 @@ page FileUploadDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@upload</code><span>Fires when the component emits the upload event.</span></div><div><code>@progress</code><span>Fires as an operation reports progress.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div><div><code>@cancel</code><span>Fires when the current operation is cancelled.</span></div><div><code>@remove</code><span>Fires when the component emits the remove event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('select', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"File Upload"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"File Upload"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-demo-1">Production default</a><a href="#file-upload-demo-2">Compact application</a><a href="#file-upload-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-demo-1">Production default</a><a href="#file-upload-demo-2">Compact application</a><a href="#file-upload-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ page GridDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-grid-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-grid-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-grid-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-grid-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -97,11 +97,11 @@ page GridDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#grid-demo-1">Production default</a><a href="#grid-demo-2">Compact application</a><a href="#grid-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#grid-demo-1">Production default</a><a href="#grid-demo-2">Compact application</a><a href="#grid-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ page ImageDetail {
|
|||||||
<span class="showcase-eyebrow">Layout component</span>
|
<span class="showcase-eyebrow">Layout component</span>
|
||||||
<h1>Image</h1>
|
<h1>Image</h1>
|
||||||
<p>Theme-aware, responsive image component.</p>
|
<p>Theme-aware, responsive image component.</p>
|
||||||
<div class="detail-badges"><span>9 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>9 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -41,7 +41,7 @@ page ImageDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><input id="playground-image-width" name="pg_width" type="text" value="" /></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-image-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><input id="playground-image-width" name="pg_width" type="text" value="" /></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-image-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -100,11 +100,15 @@ page ImageDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('load', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#image-demo-1">Production default</a><a href="#image-demo-2">Compact application</a><a href="#image-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#image-demo-1">Production default</a><a href="#image-demo-2">Compact application</a><a href="#image-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,17 +3,27 @@ page InputGroupDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Group"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "input-group-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "input-groupField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Workspace"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
||||||
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter input group"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
|
state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_startText = ctx.url.searchParams.get("pg_startText") ?? "https://"
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_endText = ctx.url.searchParams.get("pg_endText") ?? ".app"
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Check"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Input Group"
|
title = "Input Group"
|
||||||
description = "Theme-aware, responsive input group component."
|
description = "Theme-aware, responsive input group component."
|
||||||
@@ -27,7 +37,7 @@ page InputGroupDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Input Group</h1>
|
<h1>Input Group</h1>
|
||||||
<p>Theme-aware, responsive input group component.</p>
|
<p>Theme-aware, responsive input group component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>23 props</span><span>0 slots</span><span>6 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,19 +46,25 @@ page InputGroupDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="InputGroup" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="InputGroup" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" startText="{playground_startText}" endText="{playground_endText}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" actionLabel="{playground_actionLabel}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" variant="{playground_variant}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><InputGroup
|
<pre><code data-playground-code><InputGroup
|
||||||
value="sample-1"
|
id="input-group-1"
|
||||||
placeholder="Enter a sample value"
|
name="input-groupField"
|
||||||
|
label="Workspace"
|
||||||
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
actionLabel="Check"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-input-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-group-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-group-label" name="pg_label" type="text" value="Input Group" /></label><label class="playground-field" for="playground-input-group-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-group-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-group-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-group-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-group-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-group-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-group-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-group-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-input-group-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-group-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-input-group-step"><span><strong>step</strong><small>string</small></span><input id="playground-input-group-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-input-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-group-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-group-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-input-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-group-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-group-id" name="pg_id" type="text" value="input-group-1" /></label><label class="playground-field" for="playground-input-group-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-group-name" name="pg_name" type="text" value="input-groupField" /></label><label class="playground-field" for="playground-input-group-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-group-label" name="pg_label" type="text" value="Workspace" /></label><label class="playground-toggle" for="playground-input-group-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-group-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-group-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-input-group-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-group-placeholder" name="pg_placeholder" type="text" value="Enter input group" /></label><label class="playground-field" for="playground-input-group-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-group-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-group-startText"><span><strong>start Text</strong><small>string</small></span><input id="playground-input-group-startText" name="pg_startText" type="text" value="https://" /></label><label class="playground-field" for="playground-input-group-endText"><span><strong>end Text</strong><small>string</small></span><input id="playground-input-group-endText" name="pg_endText" type="text" value=".app" /></label><label class="playground-field" for="playground-input-group-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-group-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-group-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-group-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-input-group-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-input-group-actionLabel" name="pg_actionLabel" type="text" value="Check" /></label><label class="playground-field" for="playground-input-group-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-group-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-input-group-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-group-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-group-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-group-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-group-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-group-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-Line truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,70 +73,236 @@ page InputGroupDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-group-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="input-group-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="InputGroup" size="default" label="Input Group" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="InputGroup" size="default" color="primary" id="input-group-1" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="Check" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><InputGroup
|
<pre><code><InputGroup
|
||||||
value="sample-1"
|
id="input-group-1"
|
||||||
placeholder="Enter a sample value"
|
name="input-groupField"
|
||||||
|
label="Workspace"
|
||||||
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
actionLabel="Check"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-group-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="input-group-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="InputGroup" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="InputGroup" size="default" color="primary" id="input-group-2" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="icon-[lucide--sparkles]" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="outlined" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><InputGroup
|
<pre><code><InputGroup
|
||||||
size="sm"
|
id="input-group-2"
|
||||||
label="Compact example"
|
name="input-groupField"
|
||||||
value="sample-2"
|
label="Workspace"
|
||||||
placeholder="Enter a sample value"
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
variant="outlined"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-group-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="input-group-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="InputGroup" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="InputGroup" size="default" color="primary" id="input-group-3" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="icon-[lucide--circle-user-round]" iconPosition="end" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="floating" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><InputGroup
|
<pre><code><InputGroup
|
||||||
size="lg"
|
id="input-group-3"
|
||||||
label="Advanced example"
|
name="input-groupField"
|
||||||
value="sample-3"
|
label="Workspace"
|
||||||
placeholder="Search by name, email, or identifier"
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
variant="floating"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="input-group-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"><div data-component="InputGroup" size="sm" color="primary" id="input-group-4" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="pill" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputGroup
|
||||||
|
size="sm"
|
||||||
|
id="input-group-4"
|
||||||
|
name="input-groupField"
|
||||||
|
label="Workspace"
|
||||||
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
variant="pill"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="input-group-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"><div data-component="InputGroup" size="default" color="primary" id="input-group-5" name="input-groupField" label="Workspace" value="wirejs" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputGroup
|
||||||
|
id="input-group-5"
|
||||||
|
name="input-groupField"
|
||||||
|
label="Workspace"
|
||||||
|
value="wirejs"
|
||||||
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="input-group-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"><div data-component="InputGroup" size="default" color="primary" id="input-group-6" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="true" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputGroup
|
||||||
|
id="input-group-6"
|
||||||
|
name="input-groupField"
|
||||||
|
label="Workspace"
|
||||||
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="input-group-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"><div data-component="InputGroup" size="default" color="primary" id="input-group-7" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="We'll never share your details." cornerHint="" error="" inline="true" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputGroup
|
||||||
|
id="input-group-7"
|
||||||
|
name="input-groupField"
|
||||||
|
label="Workspace"
|
||||||
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="input-group-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"><div data-component="InputGroup" size="default" color="primary" id="input-group-8" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="Optional" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputGroup
|
||||||
|
id="input-group-8"
|
||||||
|
name="input-groupField"
|
||||||
|
label="Workspace"
|
||||||
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
cornerHint="Optional"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="input-group-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="InputGroup" size="default" color="primary" id="input-group-9" name="validatedField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="" helperText="" cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputGroup
|
||||||
|
id="input-group-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Workspace"
|
||||||
|
placeholder="Enter input group"
|
||||||
|
startText="https://"
|
||||||
|
endText=".app"
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@submit</code><span>Fires when the component submits its value.</span></div><div><code>@action</code><span>Fires when the component's action is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Input Group"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input group"</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>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>startText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>endText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-group-demo-1">Production default</a><a href="#input-group-demo-2">Compact application</a><a href="#input-group-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-group-demo-1">Default field</a><a href="#input-group-demo-2">Outlined with start icon</a><a href="#input-group-demo-3">Floating label</a><a href="#input-group-demo-4">Pill and compact size</a><a href="#input-group-demo-5">Read only</a><a href="#input-group-demo-6">Disabled</a><a href="#input-group-demo-7">Inline helper text</a><a href="#input-group-demo-8">Field with corner hint</a><a href="#input-group-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -1,19 +1,46 @@
|
|||||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||||
page InputNumberDetail {
|
page InputNumberDetail {
|
||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Number"
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "default-quantity"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "number"
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? "1"
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_min = ctx.url.searchParams.get("pg_min") ?? "0"
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_max = ctx.url.searchParams.get("pg_max") ?? "99"
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_step = ctx.url.searchParams.get("pg_step") ?? "1"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_precision = ctx.url.searchParams.get("pg_precision") ?? "auto"
|
||||||
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? ""
|
||||||
|
state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
|
||||||
|
state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
|
||||||
|
state playground_prefix = ctx.url.searchParams.get("pg_prefix") ?? ""
|
||||||
|
state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? ""
|
||||||
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? ""
|
||||||
|
state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off"
|
||||||
|
state playground_inputMode = ctx.url.searchParams.get("pg_inputMode") ?? "decimal"
|
||||||
|
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? ""
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
|
state playground_inputDisabled = ctx.url.searchParams.get("pg_inputDisabled") ?? "false"
|
||||||
|
state playground_buttonsDisabled = ctx.url.searchParams.get("pg_buttonsDisabled") ?? "false"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
|
state playground_allowInput = ctx.url.searchParams.get("pg_allowInput") ?? "true"
|
||||||
|
state playground_keyboard = ctx.url.searchParams.get("pg_keyboard") ?? "true"
|
||||||
|
state playground_wheel = ctx.url.searchParams.get("pg_wheel") ?? "false"
|
||||||
|
state playground_clamp = ctx.url.searchParams.get("pg_clamp") ?? "true"
|
||||||
|
state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
|
||||||
|
state playground_showButtons = ctx.url.searchParams.get("pg_showButtons") ?? "true"
|
||||||
|
state playground_showValidationMessage = ctx.url.searchParams.get("pg_showValidationMessage") ?? "true"
|
||||||
|
state playground_decrementLabel = ctx.url.searchParams.get("pg_decrementLabel") ?? "Decrease value"
|
||||||
|
state playground_incrementLabel = ctx.url.searchParams.get("pg_incrementLabel") ?? "Increase value"
|
||||||
|
state playground_controlsLabel = ctx.url.searchParams.get("pg_controlsLabel") ?? "Quantity controls"
|
||||||
|
state playground_requiredMessage = ctx.url.searchParams.get("pg_requiredMessage") ?? "A value is required."
|
||||||
|
state playground_minMessage = ctx.url.searchParams.get("pg_minMessage") ?? "Value is below the minimum."
|
||||||
|
state playground_maxMessage = ctx.url.searchParams.get("pg_maxMessage") ?? "Value is above the maximum."
|
||||||
seo {
|
seo {
|
||||||
title = "Input Number"
|
title = "Input Number"
|
||||||
description = "Theme-aware, responsive input number component."
|
description = "Theme-aware, responsive input number component."
|
||||||
@@ -27,7 +54,7 @@ page InputNumberDetail {
|
|||||||
<span class="showcase-eyebrow">Advanced Forms component</span>
|
<span class="showcase-eyebrow">Advanced Forms component</span>
|
||||||
<h1>Input Number</h1>
|
<h1>Input Number</h1>
|
||||||
<p>Theme-aware, responsive input number component.</p>
|
<p>Theme-aware, responsive input number component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>40 props</span><span>0 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,19 +63,22 @@ page InputNumberDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="InputNumber" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="InputNumber" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}" id="{playground_id}" name="{playground_name}" value="{playground_value}" min="{playground_min}" max="{playground_max}" step="{playground_step}" precision="{playground_precision}" label="{playground_label}" description="{playground_description}" helpText="{playground_helpText}" error="{playground_error}" invalid="{playground_invalid}" prefix="{playground_prefix}" suffix="{playground_suffix}" placeholder="{playground_placeholder}" autocomplete="{playground_autocomplete}" inputMode="{playground_inputMode}" ariaLabel="{playground_ariaLabel}" required="{playground_required}" disabled="{playground_disabled}" inputDisabled="{playground_inputDisabled}" buttonsDisabled="{playground_buttonsDisabled}" readonly="{playground_readonly}" allowInput="{playground_allowInput}" keyboard="{playground_keyboard}" wheel="{playground_wheel}" clamp="{playground_clamp}" fullWidth="{playground_fullWidth}" showButtons="{playground_showButtons}" showValidationMessage="{playground_showValidationMessage}" decrementLabel="{playground_decrementLabel}" incrementLabel="{playground_incrementLabel}" controlsLabel="{playground_controlsLabel}" requiredMessage="{playground_requiredMessage}" minMessage="{playground_minMessage}" maxMessage="{playground_maxMessage}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><InputNumber
|
<pre><code data-playground-code><InputNumber
|
||||||
value="sample-1"
|
size="md"
|
||||||
placeholder="Enter a sample value"
|
name="default-quantity"
|
||||||
|
value="1"
|
||||||
|
min="0"
|
||||||
|
max="99"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>40 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-input-number-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-number-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-number-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-number-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-number-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-number-label" name="pg_label" type="text" value="Input Number" /></label><label class="playground-field" for="playground-input-number-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-number-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-number-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-number-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-number-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-number-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-number-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-number-type" name="pg_type" type="text" value="number" /></label><label class="playground-field" for="playground-input-number-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-number-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-input-number-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-number-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-input-number-step"><span><strong>step</strong><small>string</small></span><input id="playground-input-number-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-number-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-number-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-number-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-input-number-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-number-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-number-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-number-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-number-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-input-number-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="compact">compact</option><option value="horizontal">horizontal</option><option value="labeled">labeled</option><option value="seat">seat</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-input-number-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-number-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-input-number-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-number-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-input-number-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-number-name" name="pg_name" type="text" value="default-quantity" /></label><label class="playground-field" for="playground-input-number-value"><span><strong>value</strong><small>number</small></span><input id="playground-input-number-value" name="pg_value" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-number-min" name="pg_min" type="text" value="0" /></label><label class="playground-field" for="playground-input-number-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-number-max" name="pg_max" type="text" value="99" /></label><label class="playground-field" for="playground-input-number-step"><span><strong>step</strong><small>number</small></span><input id="playground-input-number-step" name="pg_step" type="number" value="1" /></label><label class="playground-field" for="playground-input-number-precision"><span><strong>precision</strong><small>string</small></span><input id="playground-input-number-precision" name="pg_precision" type="text" value="auto" /></label><label class="playground-field" for="playground-input-number-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-number-label" name="pg_label" type="text" value="" /></label><label class="playground-field" for="playground-input-number-description"><span><strong>description</strong><small>string</small></span><input id="playground-input-number-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-input-number-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-input-number-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-field" for="playground-input-number-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-number-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-input-number-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-input-number-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-input-number-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-input-number-suffix" name="pg_suffix" type="text" valueLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,70 +87,283 @@ page InputNumberDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default controls</h2><p>Use standard decrement and increment buttons alongside a numeric input field.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-number-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="input-number-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="InputNumber" size="default" label="Input Number" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default controls usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><InputNumber
|
<pre><code><InputNumber
|
||||||
value="sample-1"
|
size="md"
|
||||||
placeholder="Enter a sample value"
|
name="default-quantity"
|
||||||
|
value="1"
|
||||||
|
min="0"
|
||||||
|
max="99"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Labeled input style</h2><p>Add supporting label text and rounded controls for a more form-like number input.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-number-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="input-number-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="InputNumber" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" variant="labeled" name="labeled-quantity" value="1" min="1" max="25" step="1" label="Select quantity"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Labeled input style usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><InputNumber
|
<pre><code><InputNumber
|
||||||
size="sm"
|
size="md"
|
||||||
label="Compact example"
|
variant="labeled"
|
||||||
value="sample-2"
|
name="labeled-quantity"
|
||||||
placeholder="Enter a sample value"
|
value="1"
|
||||||
|
min="1"
|
||||||
|
max="25"
|
||||||
|
label="Select quantity"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Vertical buttons</h2><p>Stack the increment and decrement buttons vertically beside the field.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-number-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="input-number-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="InputNumber" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="InputNumber" size="md" color="primary" variant="vertical" name="vertical-quantity" value="1" min="0" max="20" label="Select quantity"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Vertical buttons usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><InputNumber
|
<pre><code><InputNumber
|
||||||
size="lg"
|
size="md"
|
||||||
label="Advanced example"
|
variant="vertical"
|
||||||
value="sample-3"
|
name="vertical-quantity"
|
||||||
placeholder="Search by name, email, or identifier"
|
value="1"
|
||||||
|
min="0"
|
||||||
|
max="20"
|
||||||
|
label="Select quantity"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Horizontal buttons</h2><p>Place the increment and decrement buttons on opposite sides of the value.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="md" color="primary" variant="horizontal" name="horizontal-quantity" value="1" min="0" max="20"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Horizontal buttons usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="md"
|
||||||
|
variant="horizontal"
|
||||||
|
name="horizontal-quantity"
|
||||||
|
value="1"
|
||||||
|
min="0"
|
||||||
|
max="20"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Sizing</span><h2>Compact size</h2><p>Use a smaller compact control when the available space is limited.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="sm" color="primary" variant="compact" name="compact-quantity" value="0" min="0" max="10"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="sm"
|
||||||
|
variant="compact"
|
||||||
|
name="compact-quantity"
|
||||||
|
min="0"
|
||||||
|
max="10"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Commerce</span><h2>Seat quantity selector</h2><p>Pair the control with pricing information for seat counts or plan add-ons.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="md" color="primary" variant="seat" name="additional-seats" value="0" min="0" max="50" label="Additional seats" description="$39 monthly"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Seat quantity selector usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="md"
|
||||||
|
variant="seat"
|
||||||
|
name="additional-seats"
|
||||||
|
min="0"
|
||||||
|
max="50"
|
||||||
|
label="Additional seats"
|
||||||
|
description="$39 monthly"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled input</h2><p>Disable manual entry while keeping supported quantity controls available.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="md" color="primary" name="disabled-input" value="10" inputDisabled="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled input usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="md"
|
||||||
|
name="disabled-input"
|
||||||
|
value="10"
|
||||||
|
inputDisabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled buttons</h2><p>Disable increment and decrement controls while leaving the current value visible.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="md" color="primary" name="disabled-buttons" value="10" buttonsDisabled="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled buttons usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="md"
|
||||||
|
name="disabled-buttons"
|
||||||
|
value="10"
|
||||||
|
buttonsDisabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Behaviour</span><h2>Custom step size</h2><p>Set a custom step so every button press changes the value by two.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="md" color="primary" name="custom-step" value="0" min="0" max="20" step="2"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Custom step size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="md"
|
||||||
|
name="custom-step"
|
||||||
|
min="0"
|
||||||
|
max="20"
|
||||||
|
step="2"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Limits</span><h2>Negative values</h2><p>Use the min option to permit controlled negative values.</p></div>
|
||||||
|
<span class="demo-case-number">010</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="md" color="primary" name="negative-values" value="-10" min="-100" max="100"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Negative values usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="md"
|
||||||
|
name="negative-values"
|
||||||
|
value="-10"
|
||||||
|
min="-100"
|
||||||
|
max="100"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Limits</span><h2>Maximum limit</h2><p>Set an upper limit and disable incrementing when that limit is reached.</p></div>
|
||||||
|
<span class="demo-case-number">011</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="md" color="primary" name="maximum-limit" value="10" min="0" max="10"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Maximum limit usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="md"
|
||||||
|
name="maximum-limit"
|
||||||
|
value="10"
|
||||||
|
min="0"
|
||||||
|
max="10"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validation states</h2><p>Communicate whether the current numerical value is valid.</p></div>
|
||||||
|
<span class="demo-case-number">012</span>
|
||||||
|
</header>
|
||||||
|
<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"><div data-component="InputNumber" size="md" color="primary" name="invalid-quantity" value="10" min="0" max="5" error="Out of limit"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validation states usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><InputNumber
|
||||||
|
size="md"
|
||||||
|
name="invalid-quantity"
|
||||||
|
value="10"
|
||||||
|
min="0"
|
||||||
|
max="5"
|
||||||
|
error="Out of limit"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@increment</code><span>Fires when the component emits the increment event.</span></div><div><code>@decrement</code><span>Fires when the component emits the decrement event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Input Number"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"number"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><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>"quantity"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>precision</code></td><td>string</td><td><code>"auto"</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>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>inputMode</code></td><td>string</td><td><code>"decimal"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>required</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>inputDisabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>buttonsDisabled</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>allowInput</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>keyboard</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>wheel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>clamp</code></td><td>boolean</td><td><code>true</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>showButtons</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showValidationMessage</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>decrementLabel</code></td><td>string</td><td><code>"Decrease value"</code></td><td>No</td></tr><tr><td><code>incrementLabel</code></td><td>string</td><td><code>"Increase value"</code></td><td>No</td></tr><tr><td><code>controlsLabel</code></td><td>string</td><td><code>"Quantity controls"</code></td><td>No</td></tr><tr><td><code>requiredMessage</code></td><td>string</td><td><code>"A value is required."</code></td><td>No</td></tr><tr><td><code>minMessage</code></td><td>string</td><td><code>"Value is below the minimum."</code></td><td>No</td></tr><tr><td><code>maxMessage</code></td><td>string</td><td><code>"Value is above the maximum."</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-number-demo-1">Production default</a><a href="#input-number-demo-2">Compact application</a><a href="#input-number-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-number-demo-1">Default controls</a><a href="#input-number-demo-2">Labeled input style</a><a href="#input-number-demo-3">Vertical buttons</a><a href="#input-number-demo-4">Horizontal buttons</a><a href="#input-number-demo-5">Compact size</a><a href="#input-number-demo-6">Seat quantity selector</a><a href="#input-number-demo-7">Disabled input</a><a href="#input-number-demo-8">Disabled buttons</a><a href="#input-number-demo-9">Custom step size</a><a href="#input-number-demo-10">Negative values</a><a href="#input-number-demo-11">Maximum limit</a><a href="#input-number-demo-12">Validation states</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
+220
-35
@@ -3,17 +3,32 @@ page InputDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "input-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "inputField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Email address"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter input"
|
||||||
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
||||||
|
state playground_type = ctx.url.searchParams.get("pg_type") ?? "email"
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
|
state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "email"
|
||||||
|
state playground_inputmode = ctx.url.searchParams.get("pg_inputmode") ?? ""
|
||||||
|
state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? ""
|
||||||
|
state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? ""
|
||||||
|
state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? ""
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
|
||||||
seo {
|
seo {
|
||||||
title = "Input"
|
title = "Input"
|
||||||
description = "Theme-aware, responsive input component."
|
description = "Theme-aware, responsive input component."
|
||||||
@@ -27,7 +42,7 @@ page InputDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Input</h1>
|
<h1>Input</h1>
|
||||||
<p>Theme-aware, responsive input component.</p>
|
<p>Theme-aware, responsive input component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>28 props</span><span>0 slots</span><span>7 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,19 +51,24 @@ page InputDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Input" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Input" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" value="{playground_value}" type="{playground_type}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" autocomplete="{playground_autocomplete}" inputmode="{playground_inputmode}" minlength="{playground_minlength}" maxlength="{playground_maxlength}" pattern="{playground_pattern}" min="{playground_min}" max="{playground_max}" step="{playground_step}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Input
|
<pre><code data-playground-code><Input
|
||||||
value="sample-1"
|
id="input-1"
|
||||||
placeholder="Enter a sample value"
|
name="inputField"
|
||||||
|
label="Email address"
|
||||||
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
|
autocomplete="email"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-label" name="pg_label" type="text" value="Input" /></label><label class="playground-field" for="playground-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-input-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-input-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-input-step"><span><strong>step</strong><small>string</small></span><input id="playground-input-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-input-id"><span><strong>id</strong><small>string</small></span><input id="playground-input-id" name="pg_id" type="text" value="input-1" /></label><label class="playground-field" for="playground-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-input-name" name="pg_name" type="text" value="inputField" /></label><label class="playground-field" for="playground-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-input-label" name="pg_label" type="text" value="Email address" /></label><label class="playground-toggle" for="playground-input-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-input-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-input-placeholder" name="pg_placeholder" type="text" value="Enter input" /></label><label class="playground-field" for="playground-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-input-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-input-type" name="pg_type" type="text" value="email" /></label><label class="playground-field" for="playground-input-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-input-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="floating">floating</option></select></label><label class="playground-field" for="playground-input-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-input-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-input-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-input-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-input-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-input-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-input-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-input-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-input-error"><span><strong>error</strong><small>string</small></span><input id="playground-input-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-input-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-input-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,70 +77,235 @@ page InputDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="input-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Input" size="default" label="Input" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Input" size="default" color="primary" id="input-1" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Input
|
<pre><code><Input
|
||||||
value="sample-1"
|
id="input-1"
|
||||||
placeholder="Enter a sample value"
|
name="inputField"
|
||||||
|
label="Email address"
|
||||||
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
|
autocomplete="email"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="input-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Input" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Input" size="default" color="primary" id="input-2" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Input
|
<pre><code><Input
|
||||||
size="sm"
|
id="input-2"
|
||||||
label="Compact example"
|
name="inputField"
|
||||||
value="sample-2"
|
label="Email address"
|
||||||
placeholder="Enter a sample value"
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
variant="outlined"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
autocomplete="email"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="input-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="input-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Input" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Input" size="default" color="primary" id="input-3" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Input
|
<pre><code><Input
|
||||||
size="lg"
|
id="input-3"
|
||||||
label="Advanced example"
|
name="inputField"
|
||||||
value="sample-3"
|
label="Email address"
|
||||||
placeholder="Search by name, email, or identifier"
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
variant="floating"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
autocomplete="email"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Input" size="sm" color="primary" id="input-4" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="pill" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Input
|
||||||
|
size="sm"
|
||||||
|
id="input-4"
|
||||||
|
name="inputField"
|
||||||
|
label="Email address"
|
||||||
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
variant="pill"
|
||||||
|
autocomplete="email"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Input" size="default" color="primary" id="input-5" name="inputField" label="Email address" placeholder="Enter input" value="readonly@example.com" type="email" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false" autocomplete="email"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Input
|
||||||
|
id="input-5"
|
||||||
|
name="inputField"
|
||||||
|
label="Email address"
|
||||||
|
placeholder="Enter input"
|
||||||
|
value="readonly@example.com"
|
||||||
|
type="email"
|
||||||
|
readonly="true"
|
||||||
|
autocomplete="email"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Input" size="default" color="primary" id="input-6" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false" autocomplete="email"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Input
|
||||||
|
id="input-6"
|
||||||
|
name="inputField"
|
||||||
|
label="Email address"
|
||||||
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
disabled="true"
|
||||||
|
autocomplete="email"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Input" size="default" color="primary" id="input-7" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="We'll never share your details." cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Input
|
||||||
|
id="input-7"
|
||||||
|
name="inputField"
|
||||||
|
label="Email address"
|
||||||
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
autocomplete="email"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Input" size="default" color="primary" id="input-8" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Input
|
||||||
|
id="input-8"
|
||||||
|
name="inputField"
|
||||||
|
label="Email address"
|
||||||
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
cornerHint="Optional"
|
||||||
|
autocomplete="email"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Input" size="default" color="primary" id="input-9" name="validatedField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="true" autocomplete="email"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Input
|
||||||
|
id="input-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Email address"
|
||||||
|
placeholder="Enter input"
|
||||||
|
type="email"
|
||||||
|
required="true"
|
||||||
|
autocomplete="email"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div><div><code>@keydown</code><span>Fires when the component emits the keydown event.</span></div><div><code>@keyup</code><span>Fires when the component emits the keyup event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Input"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Input"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inputmode</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-demo-1">Production default</a><a href="#input-demo-2">Compact application</a><a href="#input-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#input-demo-1">Default field</a><a href="#input-demo-2">Outlined with start icon</a><a href="#input-demo-3">Floating label</a><a href="#input-demo-4">Pill and compact size</a><a href="#input-demo-5">Read only</a><a href="#input-demo-6">Disabled</a><a href="#input-demo-7">Inline helper text</a><a href="#input-demo-8">Field with corner hint</a><a href="#input-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ page KbdDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>4 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-kbd-size"><span><strong>size</strong><small>string</small></span><select id="playground-kbd-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-kbd-color"><span><strong>color</strong><small>string</small></span><select id="playground-kbd-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-kbd-label"><span><strong>label</strong><small>string</small></span><input id="playground-kbd-label" name="pg_label" type="text" value="Kbd" /></label><label class="playground-field" for="playground-kbd-class"><span><strong>class</strong><small>string</small></span><input id="playground-kbd-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-kbd-size"><span><strong>size</strong><small>string</small></span><select id="playground-kbd-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-kbd-color"><span><strong>color</strong><small>string</small></span><select id="playground-kbd-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-kbd-label"><span><strong>label</strong><small>string</small></span><input id="playground-kbd-label" name="pg_label" type="text" value="Kbd" /></label><label class="playground-field" for="playground-kbd-class"><span><strong>class</strong><small>string</small></span><input id="playground-kbd-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -101,11 +101,11 @@ page KbdDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"⌘ K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"⌘ K"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#kbd-demo-1">Production default</a><a href="#kbd-demo-2">Compact application</a><a href="#kbd-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#kbd-demo-1">Production default</a><a href="#kbd-demo-2">Compact application</a><a href="#kbd-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ page LayoutSplitterDetail {
|
|||||||
<span class="showcase-eyebrow">Layout component</span>
|
<span class="showcase-eyebrow">Layout component</span>
|
||||||
<h1>Layout Splitter</h1>
|
<h1>Layout Splitter</h1>
|
||||||
<p>Theme-aware, responsive layout splitter component.</p>
|
<p>Theme-aware, responsive layout splitter component.</p>
|
||||||
<div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>6 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -38,7 +38,7 @@ page LayoutSplitterDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-layout-splitter-size"><span><strong>size</strong><small>string</small></span><select id="playground-layout-splitter-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-layout-splitter-color"><span><strong>color</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-layout-splitter-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-layout-splitter-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-layout-splitter-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-layout-splitter-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-layout-splitter-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-layout-splitter-class"><span><strong>class</strong><small>string</small></span><input id="playground-layout-splitter-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-layout-splitter-size"><span><strong>size</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-color"><span><strong>color</strong><small>string</small></span><select id="playground-layout-splitter-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-layout-splitter-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-layout-splitter-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-layout-splitter-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-layout-splitter-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-layout-splitter-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-layout-splitter-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-layout-splitter-class"><span><strong>class</strong><small>string</small></span><input id="playground-layout-splitter-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -97,11 +97,15 @@ page LayoutSplitterDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@resizeStart</code><span>Fires when the component emits the resize Start event.</span></div><div><code>@resize</code><span>Fires when the component emits the resize event.</span></div><div><code>@resizeEnd</code><span>Fires when the component emits the resize End event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('resizeStart', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#layout-splitter-demo-1">Production default</a><a href="#layout-splitter-demo-2">Compact application</a><a href="#layout-splitter-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#layout-splitter-demo-1">Production default</a><a href="#layout-splitter-demo-2">Compact application</a><a href="#layout-splitter-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page LegendIndicatorDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Legend Indicator</h1>
|
<h1>Legend Indicator</h1>
|
||||||
<p>Theme-aware, responsive legend indicator component.</p>
|
<p>Theme-aware, responsive legend indicator component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page LegendIndicatorDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-legend-indicator-size"><span><strong>size</strong><small>string</small></span><select id="playground-legend-indicator-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-legend-indicator-color"><span><strong>color</strong><small>string</small></span><select id="playground-legend-indicator-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-legend-indicator-title"><span><strong>title</strong><small>string</small></span><input id="playground-legend-indicator-title" name="pg_title" type="text" value="Legend Indicator example" /></label><label class="playground-field" for="playground-legend-indicator-description"><span><strong>description</strong><small>string</small></span><input id="playground-legend-indicator-description" name="pg_description" type="text" value="A polished default legend indicator for a modern application." /></label><label class="playground-field" for="playground-legend-indicator-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-legend-indicator-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-legend-indicator-size"><span><strong>size</strong><small>string</small></span><select id="playground-legend-indicator-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-legend-indicator-color"><span><strong>color</strong><small>string</small></span><select id="playground-legend-indicator-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-legend-indicator-title"><span><strong>title</strong><small>string</small></span><input id="playground-legend-indicator-title" name="pg_title" type="text" value="Legend Indicator example" /></label><label class="playground-field" for="playground-legend-indicator-description"><span><strong>description</strong><small>string</small></span><input id="playground-legend-indicator-description" name="pg_description" type="text" value="A polished default legend indicator for a modern application." /></label><label class="playground-field" for="playground-legend-indicator-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-legend-indicator-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "legend-indicator-0-1",
|
"id": "legend-indicator-0-1",
|
||||||
"key": "legend-indicator-0-1",
|
"key": "legend-indicator-0-1",
|
||||||
@@ -649,11 +649,15 @@ page LegendIndicatorDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('toggle', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Legend Indicator"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Legend Indicator"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#legend-indicator-demo-1">Production default</a><a href="#legend-indicator-demo-2">Compact application</a><a href="#legend-indicator-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#legend-indicator-demo-1">Production default</a><a href="#legend-indicator-demo-2">Compact application</a><a href="#legend-indicator-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ page LinkDetail {
|
|||||||
<span class="showcase-eyebrow">Layout component</span>
|
<span class="showcase-eyebrow">Layout component</span>
|
||||||
<h1>Link</h1>
|
<h1>Link</h1>
|
||||||
<p>Theme-aware, responsive link component.</p>
|
<p>Theme-aware, responsive link component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -42,7 +42,7 @@ page LinkDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -107,11 +107,15 @@ page LinkDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('click', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#link-demo-1">Production default</a><a href="#link-demo-2">Compact application</a><a href="#link-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#link-demo-1">Production default</a><a href="#link-demo-2">Compact application</a><a href="#link-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page ListGroupDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>List Group</h1>
|
<h1>List Group</h1>
|
||||||
<p>Theme-aware, responsive list group component.</p>
|
<p>Theme-aware, responsive list group component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page ListGroupDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-list-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-group-title" name="pg_title" type="text" value="List Group example" /></label><label class="playground-field" for="playground-list-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-group-description" name="pg_description" type="text" value="A polished default list group for a modern application." /></label><label class="playground-field" for="playground-list-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-list-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-list-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-group-title" name="pg_title" type="text" value="List Group example" /></label><label class="playground-field" for="playground-list-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-group-description" name="pg_description" type="text" value="A polished default list group for a modern application." /></label><label class="playground-field" for="playground-list-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-list-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "list-group-0-1",
|
"id": "list-group-0-1",
|
||||||
"key": "list-group-0-1",
|
"key": "list-group-0-1",
|
||||||
@@ -649,11 +649,15 @@ page ListGroupDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('select', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-group-demo-1">Production default</a><a href="#list-group-demo-2">Compact application</a><a href="#list-group-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-group-demo-1">Production default</a><a href="#list-group-demo-2">Compact application</a><a href="#list-group-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page ListDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>List</h1>
|
<h1>List</h1>
|
||||||
<p>Theme-aware, responsive list component.</p>
|
<p>Theme-aware, responsive list component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page ListDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-list-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-title" name="pg_title" type="text" value="List example" /></label><label class="playground-field" for="playground-list-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-description" name="pg_description" type="text" value="A polished default list for a modern application." /></label><label class="playground-field" for="playground-list-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-list-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-list-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-title" name="pg_title" type="text" value="List example" /></label><label class="playground-field" for="playground-list-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-description" name="pg_description" type="text" value="A polished default list for a modern application." /></label><label class="playground-field" for="playground-list-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-list-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "list-0-1",
|
"id": "list-0-1",
|
||||||
"key": "list-0-1",
|
"key": "list-0-1",
|
||||||
@@ -649,11 +649,15 @@ page ListDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('select', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-demo-1">Production default</a><a href="#list-demo-2">Compact application</a><a href="#list-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-demo-1">Production default</a><a href="#list-demo-2">Compact application</a><a href="#list-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page MapDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Map</h1>
|
<h1>Map</h1>
|
||||||
<p>Theme-aware, responsive map component.</p>
|
<p>Theme-aware, responsive map component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page MapDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Map example" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="A polished default map for a modern application." /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Map example" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="A polished default map for a modern application." /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "map-0-1",
|
"id": "map-0-1",
|
||||||
"key": "map-0-1",
|
"key": "map-0-1",
|
||||||
@@ -649,11 +649,15 @@ page MapDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@ready</code><span>Fires when the component emits the ready event.</span></div><div><code>@move</code><span>Fires when the component emits the move event.</span></div><div><code>@zoom</code><span>Fires when the component emits the zoom event.</span></div><div><code>@markerClick</code><span>Fires when the component emits the marker Click event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('ready', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#map-demo-1">Production default</a><a href="#map-demo-2">Compact application</a><a href="#map-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#map-demo-1">Production default</a><a href="#map-demo-2">Compact application</a><a href="#map-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page MarqueeDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Marquee</h1>
|
<h1>Marquee</h1>
|
||||||
<p>Theme-aware, responsive marquee component.</p>
|
<p>Theme-aware, responsive marquee component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page MarqueeDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-marquee-size"><span><strong>size</strong><small>string</small></span><select id="playground-marquee-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-marquee-color"><span><strong>color</strong><small>string</small></span><select id="playground-marquee-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-marquee-title"><span><strong>title</strong><small>string</small></span><input id="playground-marquee-title" name="pg_title" type="text" value="Marquee example" /></label><label class="playground-field" for="playground-marquee-description"><span><strong>description</strong><small>string</small></span><input id="playground-marquee-description" name="pg_description" type="text" value="A polished default marquee for a modern application." /></label><label class="playground-field" for="playground-marquee-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-marquee-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-marquee-size"><span><strong>size</strong><small>string</small></span><select id="playground-marquee-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-marquee-color"><span><strong>color</strong><small>string</small></span><select id="playground-marquee-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-marquee-title"><span><strong>title</strong><small>string</small></span><input id="playground-marquee-title" name="pg_title" type="text" value="Marquee example" /></label><label class="playground-field" for="playground-marquee-description"><span><strong>description</strong><small>string</small></span><input id="playground-marquee-description" name="pg_description" type="text" value="A polished default marquee for a modern application." /></label><label class="playground-field" for="playground-marquee-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-marquee-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "marquee-0-1",
|
"id": "marquee-0-1",
|
||||||
"key": "marquee-0-1",
|
"key": "marquee-0-1",
|
||||||
@@ -649,11 +649,15 @@ page MarqueeDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@pause</code><span>Fires when the component emits the pause event.</span></div><div><code>@resume</code><span>Fires when the component emits the resume event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('pause', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Marquee"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Marquee"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marquee-demo-1">Production default</a><a href="#marquee-demo-2">Compact application</a><a href="#marquee-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marquee-demo-1">Production default</a><a href="#marquee-demo-2">Compact application</a><a href="#marquee-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page MegaMenuDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Mega Menu</h1>
|
<h1>Mega Menu</h1>
|
||||||
<p>Theme-aware, responsive mega menu component.</p>
|
<p>Theme-aware, responsive mega menu component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page MegaMenuDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-mega-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-mega-menu-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-mega-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-mega-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-mega-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-mega-menu-label" name="pg_label" type="text" value="Mega Menu" /></label><label class="playground-field" for="playground-mega-menu-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-mega-menu-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-mega-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-mega-menu-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-mega-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-mega-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-mega-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-mega-menu-label" name="pg_label" type="text" value="Mega Menu" /></label><label class="playground-field" for="playground-mega-menu-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-mega-menu-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "mega-menu-0-1",
|
"id": "mega-menu-0-1",
|
||||||
"key": "mega-menu-0-1",
|
"key": "mega-menu-0-1",
|
||||||
@@ -641,11 +641,15 @@ page MegaMenuDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('open', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Mega Menu"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Mega Menu"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#mega-menu-demo-1">Production default</a><a href="#mega-menu-demo-2">Compact application</a><a href="#mega-menu-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#mega-menu-demo-1">Production default</a><a href="#mega-menu-demo-2">Compact application</a><a href="#mega-menu-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ page ModalDetail {
|
|||||||
<span class="showcase-eyebrow">Overlays component</span>
|
<span class="showcase-eyebrow">Overlays component</span>
|
||||||
<h1>Modal</h1>
|
<h1>Modal</h1>
|
||||||
<p>Theme-aware, responsive modal component.</p>
|
<p>Theme-aware, responsive modal component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -45,7 +45,7 @@ page ModalDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-modal-size"><span><strong>size</strong><small>string</small></span><select id="playground-modal-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-modal-color"><span><strong>color</strong><small>string</small></span><select id="playground-modal-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-modal-title"><span><strong>title</strong><small>string</small></span><input id="playground-modal-title" name="pg_title" type="text" value="Modal example" /></label><label class="playground-field" for="playground-modal-description"><span><strong>description</strong><small>string</small></span><input id="playground-modal-description" name="pg_description" type="text" value="A polished default modal for a modern application." /></label><label class="playground-toggle" for="playground-modal-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-modal-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-modal-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-modal-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-modal-closeLabel" name="pg_closeLabel" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-class"><span><strong>class</strong><small>string</small></span><input id="playground-modal-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-modal-size"><span><strong>size</strong><small>string</small></span><select id="playground-modal-size" name="pg_size"><option value="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-modal-color"><span><strong>color</strong><small>string</small></span><select id="playground-modal-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-modal-title"><span><strong>title</strong><small>string</small></span><input id="playground-modal-title" name="pg_title" type="text" value="Modal example" /></label><label class="playground-field" for="playground-modal-description"><span><strong>description</strong><small>string</small></span><input id="playground-modal-description" name="pg_description" type="text" value="A polished default modal for a modern application." /></label><label class="playground-toggle" for="playground-modal-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-modal-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-modal-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-modal-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-modal-closeLabel" name="pg_closeLabel" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-class"><span><strong>class</strong><small>string</small></span><input id="playground-modal-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -117,11 +117,15 @@ page ModalDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@cancel</code><span>Fires when the current operation is cancelled.</span></div><div><code>@confirm</code><span>Fires when the component emits the confirm event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('open', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Modal"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Modal"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#modal-demo-1">Production default</a><a href="#modal-demo-2">Compact application</a><a href="#modal-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#modal-demo-1">Production default</a><a href="#modal-demo-2">Compact application</a><a href="#modal-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page NavDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Nav</h1>
|
<h1>Nav</h1>
|
||||||
<p>Theme-aware, responsive nav component.</p>
|
<p>Theme-aware, responsive nav component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page NavDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-nav-size"><span><strong>size</strong><small>string</small></span><select id="playground-nav-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-nav-color"><span><strong>color</strong><small>string</small></span><select id="playground-nav-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-nav-label"><span><strong>label</strong><small>string</small></span><input id="playground-nav-label" name="pg_label" type="text" value="Nav" /></label><label class="playground-field" for="playground-nav-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-nav-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-nav-size"><span><strong>size</strong><small>string</small></span><select id="playground-nav-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-nav-color"><span><strong>color</strong><small>string</small></span><select id="playground-nav-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-nav-label"><span><strong>label</strong><small>string</small></span><input id="playground-nav-label" name="pg_label" type="text" value="Nav" /></label><label class="playground-field" for="playground-nav-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-nav-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "nav-0-1",
|
"id": "nav-0-1",
|
||||||
"key": "nav-0-1",
|
"key": "nav-0-1",
|
||||||
@@ -641,11 +641,15 @@ page NavDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('select', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Nav"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Nav"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#nav-demo-1">Production default</a><a href="#nav-demo-2">Compact application</a><a href="#nav-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#nav-demo-1">Production default</a><a href="#nav-demo-2">Compact application</a><a href="#nav-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page NavbarDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Navbar</h1>
|
<h1>Navbar</h1>
|
||||||
<p>Theme-aware, responsive navbar component.</p>
|
<p>Theme-aware, responsive navbar component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page NavbarDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-navbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-navbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-navbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-navbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-navbar-label"><span><strong>label</strong><small>string</small></span><input id="playground-navbar-label" name="pg_label" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-navbar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-navbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-navbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-navbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-navbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-navbar-label"><span><strong>label</strong><small>string</small></span><input id="playground-navbar-label" name="pg_label" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-navbar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "navbar-0-1",
|
"id": "navbar-0-1",
|
||||||
"key": "navbar-0-1",
|
"key": "navbar-0-1",
|
||||||
@@ -641,11 +641,15 @@ page NavbarDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('toggle', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Navbar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Navbar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#navbar-demo-1">Production default</a><a href="#navbar-demo-2">Compact application</a><a href="#navbar-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#navbar-demo-1">Production default</a><a href="#navbar-demo-2">Compact application</a><a href="#navbar-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page PaginationDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Pagination</h1>
|
<h1>Pagination</h1>
|
||||||
<p>Theme-aware, responsive pagination component.</p>
|
<p>Theme-aware, responsive pagination component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page PaginationDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-pagination-size"><span><strong>size</strong><small>string</small></span><select id="playground-pagination-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pagination-color"><span><strong>color</strong><small>string</small></span><select id="playground-pagination-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pagination-label"><span><strong>label</strong><small>string</small></span><input id="playground-pagination-label" name="pg_label" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-pagination-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-pagination-size"><span><strong>size</strong><small>string</small></span><select id="playground-pagination-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pagination-color"><span><strong>color</strong><small>string</small></span><select id="playground-pagination-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pagination-label"><span><strong>label</strong><small>string</small></span><input id="playground-pagination-label" name="pg_label" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-pagination-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "pagination-0-1",
|
"id": "pagination-0-1",
|
||||||
"key": "pagination-0-1",
|
"key": "pagination-0-1",
|
||||||
@@ -641,11 +641,15 @@ page PaginationDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@previous</code><span>Fires when the component emits the previous event.</span></div><div><code>@next</code><span>Fires when the component emits the next event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('change', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#pagination-demo-1">Production default</a><a href="#pagination-demo-2">Compact application</a><a href="#pagination-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#pagination-demo-1">Production default</a><a href="#pagination-demo-2">Compact application</a><a href="#pagination-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ page PinInputDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-pin-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-pin-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-pin-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-pin-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pin-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-pin-input-label" name="pg_label" type="text" value="Default four-digit PIN" /></label><label class="playground-field" for="playground-pin-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-pin-input-name" name="pg_name" type="text" value="pin-input-1" /></label><label class="playground-field" for="playground-pin-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-pin-input-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-pin-input-length"><span><strong>length</strong><small>number</small></span><input id="playground-pin-input-length" name="pg_length" type="number" value="4" /></label><label class="playground-field" for="playground-pin-input-pattern"><span><strong>pattern</strong><small>string</small></span><input id="playground-pin-input-pattern" name="pg_pattern" type="text" value="[0-9]" /></label><label class="playground-field" for="playground-pin-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-pin-input-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-pin-input-inputMode"><span><strong>input Mode</strong><small>string</small></span><input id="playground-pin-input-inputMode" name="pg_inputMode" type="text" value="numeric" /></label><label class="playground-field" for="playground-pin-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-pin-input-placeholder" name="pg_placeholder" type="text" value="○" /></label><label class="playground-field" for="playground-pin-input-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-pin-input-autocomplete" name="pg_autocomplete" type="text" value="one-time-code" /></label><label class="playground-toggle" for="playground-pin-input-masked"><span><strong>masked</strong><small>boolean</small></span><input id="playground-pin-input-masked" name="pg_masked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-pin-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-pin-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-pin-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-autoFocus"><span><strong>auto Focus</strong><small>boolean</small></span><input id="playground-pin-input-autoFocus" name="pg_autoFocus" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-autoSubmit"><span><strong>auto Submit</strong><small>boolean</small></span><input id="playground-pin-input-autoSubmit" name="pg_autoSubmit" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-allowPaste"><span><strong>allow Paste</strong><small>boolean</small></span><input id="playground-pin-input-allowPaste" name="pg_allowPaste" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-inpLine truncated
|
<div class="playground-fields"><label class="playground-field" for="playground-pin-input-size"><span><strong>size</strong><small>string</small></span><select id="playground-pin-input-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pin-input-color"><span><strong>color</strong><small>string</small></span><select id="playground-pin-input-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pin-input-label"><span><strong>label</strong><small>string</small></span><input id="playground-pin-input-label" name="pg_label" type="text" value="Default four-digit PIN" /></label><label class="playground-field" for="playground-pin-input-name"><span><strong>name</strong><small>string</small></span><input id="playground-pin-input-name" name="pg_name" type="text" value="pin-input-1" /></label><label class="playground-field" for="playground-pin-input-value"><span><strong>value</strong><small>string</small></span><input id="playground-pin-input-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-pin-input-length"><span><strong>length</strong><small>number</small></span><input id="playground-pin-input-length" name="pg_length" type="number" value="4" /></label><label class="playground-field" for="playground-pin-input-pattern"><span><strong>pattern</strong><small>string</small></span><input id="playground-pin-input-pattern" name="pg_pattern" type="text" value="[0-9]" /></label><label class="playground-field" for="playground-pin-input-type"><span><strong>type</strong><small>string</small></span><input id="playground-pin-input-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-pin-input-inputMode"><span><strong>input Mode</strong><small>string</small></span><input id="playground-pin-input-inputMode" name="pg_inputMode" type="text" value="numeric" /></label><label class="playground-field" for="playground-pin-input-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-pin-input-placeholder" name="pg_placeholder" type="text" value="○" /></label><label class="playground-field" for="playground-pin-input-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-pin-input-autocomplete" name="pg_autocomplete" type="text" value="one-time-code" /></label><label class="playground-toggle" for="playground-pin-input-masked"><span><strong>masked</strong><small>boolean</small></span><input id="playground-pin-input-masked" name="pg_masked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-pin-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-pin-input-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-pin-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-autoFocus"><span><strong>auto Focus</strong><small>boolean</small></span><input id="playground-pin-input-autoFocus" name="pg_autoFocus" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-autoSubmit"><span><strong>auto Submit</strong><small>boolean</small></span><input id="playground-pin-input-autoSubmit" name="pg_autoSubmit" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-pin-input-allowPaste"><span><strong>allow Paste</strong><small>boolean</small></span><input id="playground-pin-input-allowPaste" name="pg_allowPaste" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></laLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -412,14 +412,9 @@ page PinInputDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every interaction</h2><p>Events are declared with <code>@event</code>, bubble from the component root, and expose their state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires after any PIN cell input is processed.</span></div><div><code>@change</code><span>Fires when the combined PIN value changes.</span></div><div><code>@complete</code><span>Fires when every PIN cell contains an accepted character.</span></div><div><code>@paste</code><span>Fires after clipboard content is filtered and distributed.</span></div><div><code>@clear</code><span>Fires after the complete PIN value is cleared.</span></div><div><code>@error</code><span>Fires when component configuration, such as regex, is invalid.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-wrn-pin-input]")
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div><div><code>@paste</code><span>Fires when the component emits the paste event.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
component.addEventListener("complete", (event) => {
|
component.addEventListener('input', (event) => {
|
||||||
console.log(event.detail.value)
|
|
||||||
console.log(event.detail.complete)
|
|
||||||
})
|
|
||||||
|
|
||||||
component.addEventListener("paste", (event) => {
|
|
||||||
console.log(event.detail)
|
console.log(event.detail)
|
||||||
})</code></pre></section></div></section>
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Verification code"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"pin"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>length</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>"[0-9]"</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>inputMode</code></td><td>string</td><td><code>"numeric"</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>autocomplete</code></td><td>string</td><td><code>"one-time-code"</code></td><td>No</td></tr><tr><td><code>masked</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>readonly</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>autoFocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoSubmit</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>allowPaste</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear code"</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>groupSize</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Verification code"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"pin"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>length</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>"[0-9]"</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>inputMode</code></td><td>string</td><td><code>"numeric"</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>autocomplete</code></td><td>string</td><td><code>"one-time-code"</code></td><td>No</td></tr><tr><td><code>masked</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>readonly</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>autoFocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoSubmit</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>allowPaste</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear code"</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>groupSize</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</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>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ page PopoverDetail {
|
|||||||
<span class="showcase-eyebrow">Overlays component</span>
|
<span class="showcase-eyebrow">Overlays component</span>
|
||||||
<h1>Popover</h1>
|
<h1>Popover</h1>
|
||||||
<p>Theme-aware, responsive popover component.</p>
|
<p>Theme-aware, responsive popover component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -45,7 +45,7 @@ page PopoverDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-popover-size"><span><strong>size</strong><small>string</small></span><select id="playground-popover-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-popover-color"><span><strong>color</strong><small>string</small></span><select id="playground-popover-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-popover-title"><span><strong>title</strong><small>string</small></span><input id="playground-popover-title" name="pg_title" type="text" value="Popover example" /></label><label class="playground-field" for="playground-popover-description"><span><strong>description</strong><small>string</small></span><input id="playground-popover-description" name="pg_description" type="text" value="A polished default popover for a modern application." /></label><label class="playground-toggle" for="playground-popover-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-popover-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-popover-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-popover-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-popover-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-popover-closeLabel" name="pg_closeLabel" type="text" value="Popover" /></label><label class="playground-field" for="playground-popover-class"><span><strong>class</strong><small>string</small></span><input id="playground-popover-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-popover-size"><span><strong>size</strong><small>string</small></span><select id="playground-popover-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-popover-color"><span><strong>color</strong><small>string</small></span><select id="playground-popover-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-popover-title"><span><strong>title</strong><small>string</small></span><input id="playground-popover-title" name="pg_title" type="text" value="Popover example" /></label><label class="playground-field" for="playground-popover-description"><span><strong>description</strong><small>string</small></span><input id="playground-popover-description" name="pg_description" type="text" value="A polished default popover for a modern application." /></label><label class="playground-toggle" for="playground-popover-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-popover-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-popover-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-popover-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-popover-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-popover-closeLabel" name="pg_closeLabel" type="text" value="Popover" /></label><label class="playground-field" for="playground-popover-class"><span><strong>class</strong><small>string</small></span><input id="playground-popover-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -117,11 +117,15 @@ page PopoverDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('open', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Popover"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Popover"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#popover-demo-1">Production default</a><a href="#popover-demo-2">Compact application</a><a href="#popover-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#popover-demo-1">Production default</a><a href="#popover-demo-2">Compact application</a><a href="#popover-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ page ProgressDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-progress-label" name="pg_label" type="text" value="Progress" /></label><label class="playground-field" for="playground-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-progress-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-progress-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-progress-label" name="pg_label" type="text" value="Progress" /></label><label class="playground-field" for="playground-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-progress-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-progress-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -106,11 +106,11 @@ page ProgressDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#progress-demo-1">Production default</a><a href="#progress-demo-2">Compact application</a><a href="#progress-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#progress-demo-1">Production default</a><a href="#progress-demo-2">Compact application</a><a href="#progress-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
+406
-28
@@ -3,12 +3,29 @@ page RadioDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Radio"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "radio-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "radioField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Standard plan"
|
||||||
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter radio"
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
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") ?? "standard"
|
||||||
|
state playground_options = ctx.url.searchParams.get("pg_options") ?? "[]"
|
||||||
|
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "true"
|
||||||
|
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "vertical"
|
||||||
|
state playground_card = ctx.url.searchParams.get("pg_card") ?? "false"
|
||||||
|
state playground_rightAligned = ctx.url.searchParams.get("pg_rightAligned") ?? "false"
|
||||||
|
state playground_list = ctx.url.searchParams.get("pg_list") ?? "false"
|
||||||
|
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") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Radio"
|
title = "Radio"
|
||||||
description = "Theme-aware, responsive radio component."
|
description = "Theme-aware, responsive radio component."
|
||||||
@@ -22,7 +39,7 @@ page RadioDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Radio</h1>
|
<h1>Radio</h1>
|
||||||
<p>Theme-aware, responsive radio component.</p>
|
<p>Theme-aware, responsive radio component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>25 props</span><span>0 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -31,18 +48,24 @@ page RadioDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Radio" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" checked="{playground_checked}" disabled="{playground_disabled}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Radio" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" value="{playground_value}" options="{playground_options}" checked="{playground_checked}" orientation="{playground_orientation}" card="{playground_card}" rightAligned="{playground_rightAligned}" list="{playground_list}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Radio
|
<pre><code data-playground-code><Radio
|
||||||
value="sample-1"
|
id="radio-1"
|
||||||
|
name="radioField"
|
||||||
|
label="Standard plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
value="standard"
|
||||||
|
options='[]'
|
||||||
|
checked="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-radio-size"><span><strong>size</strong><small>string</small></span><select id="playground-radio-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-radio-color"><span><strong>color</strong><small>string</small></span><select id="playground-radio-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-radio-label"><span><strong>label</strong><small>string</small></span><input id="playground-radio-label" name="pg_label" type="text" value="Radio" /></label><label class="playground-field" for="playground-radio-name"><span><strong>name</strong><small>string</small></span><input id="playground-radio-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-radio-value"><span><strong>value</strong><small>string</small></span><input id="playground-radio-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-toggle" for="playground-radio-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-radio-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-radio-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-class"><span><strong>class</strong><small>string</small></span><input id="playground-radio-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-radio-size"><span><strong>size</strong><small>string</small></span><select id="playground-radio-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-radio-color"><span><strong>color</strong><small>string</small></span><select id="playground-radio-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-radio-id"><span><strong>id</strong><small>string</small></span><input id="playground-radio-id" name="pg_id" type="text" value="radio-1" /></label><label class="playground-field" for="playground-radio-name"><span><strong>name</strong><small>string</small></span><input id="playground-radio-name" name="pg_name" type="text" value="radioField" /></label><label class="playground-field" for="playground-radio-label"><span><strong>label</strong><small>string</small></span><input id="playground-radio-label" name="pg_label" type="text" value="Standard plan" /></label><label class="playground-toggle" for="playground-radio-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-radio-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-radio-placeholder" name="pg_placeholder" type="text" value="Enter radio" /></label><label class="playground-field" for="playground-radio-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-radio-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-radio-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-radio-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-radio-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-radio-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-radio-value"><span><strong>value</strong><small>string</small></span><input id="playground-radio-value" name="pg_value" type="text" value="standard" /></label><label class="playground-field" for="playground-radio-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-radio-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-radio-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-radio-checked" name="pg_checked" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-radio-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-radio-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-radio-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-radio-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-radio-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-fLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -51,67 +74,422 @@ page RadioDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default radio</h2><p>Use a single radio control for one selectable option.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="radio-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="radio-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Radio" size="default" label="Radio" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Radio" size="default" color="primary" id="radio-1" name="radioField" label="Standard plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="standard" options="[]" checked="true" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default radio usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Radio
|
<pre><code><Radio
|
||||||
value="sample-1"
|
id="radio-1"
|
||||||
|
name="radioField"
|
||||||
|
label="Standard plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
value="standard"
|
||||||
|
options='[]'
|
||||||
|
checked="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Disable an option when it is unavailable.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="radio-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="radio-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Radio" size="sm" label="Compact example" value="sample-2" checked="false" disabled="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Radio" size="default" color="primary" id="radio-2" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" value="" options="[]" checked="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Radio
|
<pre><code><Radio
|
||||||
size="sm"
|
id="radio-2"
|
||||||
label="Compact example"
|
name="radioField"
|
||||||
value="sample-2"
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
variant="outlined"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
options='[]'
|
||||||
|
disabled="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Groups</span><h2>Inline radio group</h2><p>Arrange compact radio options on one horizontal line.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="radio-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="radio-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Radio" size="lg" label="Advanced example" value="sample-3" checked="false" disabled="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Radio" size="default" color="primary" id="radio-3" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" value="" options="[{"label":"Starter","value":"starter","description":""},{"label":"Professional","value":"professional","description":""},{"label":"Enterprise","value":"enterprise","description":""}]" checked="false" orientation="horizontal" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Inline radio group usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Radio
|
<pre><code><Radio
|
||||||
size="lg"
|
id="radio-3"
|
||||||
label="Advanced example"
|
name="radioField"
|
||||||
value="sample-3"
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
variant="floating"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": ""
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
orientation="horizontal"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Groups</span><h2>Vertical radio group</h2><p>Stack radio options for easy scanning.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="radio-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"><div data-component="Radio" size="sm" color="primary" id="radio-4" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="pill" icon="" iconPosition="start" value="" options="[{"label":"Starter","value":"starter","description":""},{"label":"Professional","value":"professional","description":""},{"label":"Enterprise","value":"enterprise","description":""}]" checked="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Vertical radio group usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Radio
|
||||||
|
size="sm"
|
||||||
|
id="radio-4"
|
||||||
|
name="radioField"
|
||||||
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
variant="pill"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": ""
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Content</span><h2>Radios with descriptions</h2><p>Add supporting copy to clarify each choice.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="radio-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"><div data-component="Radio" size="default" color="primary" id="radio-5" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{"label":"Starter","value":"starter","description":"For individuals and small projects."},{"label":"Professional","value":"professional","description":"For growing teams and products."},{"label":"Enterprise","value":"enterprise","description":"For organizations needing advanced controls."}]" checked="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Radios with descriptions usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Radio
|
||||||
|
id="radio-5"
|
||||||
|
name="radioField"
|
||||||
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": "For individuals and small projects."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": "For growing teams and products."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": "For organizations needing advanced controls."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Cards</span><h2>Radio cards</h2><p>Present options as selectable horizontal cards.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="radio-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"><div data-component="Radio" size="default" color="primary" id="radio-6" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{"label":"Starter","value":"starter","description":"For individuals and small projects."},{"label":"Professional","value":"professional","description":"For growing teams and products."},{"label":"Enterprise","value":"enterprise","description":"For organizations needing advanced controls."}]" checked="false" orientation="horizontal" card="true" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Radio cards usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Radio
|
||||||
|
id="radio-6"
|
||||||
|
name="radioField"
|
||||||
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": "For individuals and small projects."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": "For growing teams and products."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": "For organizations needing advanced controls."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
orientation="horizontal"
|
||||||
|
card="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Cards</span><h2>Vertical radio cards</h2><p>Stack selectable cards in a vertical layout.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="radio-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"><div data-component="Radio" size="default" color="primary" id="radio-7" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{"label":"Starter","value":"starter","description":"For individuals and small projects."},{"label":"Professional","value":"professional","description":"For growing teams and products."},{"label":"Enterprise","value":"enterprise","description":"For organizations needing advanced controls."}]" checked="false" orientation="vertical" card="true" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Vertical radio cards usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Radio
|
||||||
|
id="radio-7"
|
||||||
|
name="radioField"
|
||||||
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": "For individuals and small projects."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": "For growing teams and products."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": "For organizations needing advanced controls."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
card="true"
|
||||||
|
inline="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Alignment</span><h2>Right-aligned radio</h2><p>Place controls at the far edge of their labels.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="radio-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"><div data-component="Radio" size="default" color="primary" id="radio-8" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{"label":"Starter","value":"starter","description":"For individuals and small projects."},{"label":"Professional","value":"professional","description":"For growing teams and products."},{"label":"Enterprise","value":"enterprise","description":"For organizations needing advanced controls."}]" checked="false" orientation="vertical" card="false" rightAligned="true" list="false" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Right-aligned radio usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Radio
|
||||||
|
id="radio-8"
|
||||||
|
name="radioField"
|
||||||
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": "For individuals and small projects."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": "For growing teams and products."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": "For organizations needing advanced controls."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
rightAligned="true"
|
||||||
|
cornerHint="Optional"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Lists</span><h2>Radio list group</h2><p>Separate options with list dividers.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="radio-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"><div data-component="Radio" size="default" color="primary" id="radio-9" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{"label":"Starter","value":"starter","description":"For individuals and small projects."},{"label":"Professional","value":"professional","description":"For growing teams and products."},{"label":"Enterprise","value":"enterprise","description":"For organizations needing advanced controls."}]" checked="false" orientation="vertical" card="false" rightAligned="false" list="true" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Radio list group usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Radio
|
||||||
|
id="radio-9"
|
||||||
|
name="radioField"
|
||||||
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": "For individuals and small projects."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": "For growing teams and products."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": "For organizations needing advanced controls."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
list="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Lists</span><h2>Horizontal radio list group</h2><p>Combine list styling with a horizontal layout.</p></div>
|
||||||
|
<span class="demo-case-number">010</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="radio-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"><div data-component="Radio" size="default" color="primary" id="radio-10" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{"label":"Starter","value":"starter","description":"For individuals and small projects."},{"label":"Professional","value":"professional","description":"For growing teams and products."},{"label":"Enterprise","value":"enterprise","description":"For organizations needing advanced controls."}]" checked="false" orientation="horizontal" card="false" rightAligned="false" list="true" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Horizontal radio list group usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Radio
|
||||||
|
id="radio-10"
|
||||||
|
name="radioField"
|
||||||
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": "For individuals and small projects."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": "For growing teams and products."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": "For organizations needing advanced controls."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
orientation="horizontal"
|
||||||
|
list="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validation states</h2><p>Validate the selected group with @wrnexus/validation.</p></div>
|
||||||
|
<span class="demo-case-number">011</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="radio-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Radio" size="default" color="primary" id="radio-11" name="validatedField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{"label":"Starter","value":"starter","description":"For individuals and small projects."},{"label":"Professional","value":"professional","description":"For growing teams and products."},{"label":"Enterprise","value":"enterprise","description":"For organizations needing advanced controls."}]" checked="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="Select one plan to continue." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validation states usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Radio
|
||||||
|
id="radio-11"
|
||||||
|
name="validatedField"
|
||||||
|
label="Choose a plan"
|
||||||
|
placeholder="Enter radio"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Starter",
|
||||||
|
"value": "starter",
|
||||||
|
"description": "For individuals and small projects."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Professional",
|
||||||
|
"value": "professional",
|
||||||
|
"description": "For growing teams and products."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"value": "enterprise",
|
||||||
|
"description": "For organizations needing advanced controls."
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
helperText="Select one plan to continue."
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Radio"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"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>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>"Radio"</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>options</code></td><td>string</td><td><code>[]</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>orientation</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>card</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>rightAligned</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>list</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>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#radio-demo-1">Production default</a><a href="#radio-demo-2">Compact application</a><a href="#radio-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#radio-demo-1">Default radio</a><a href="#radio-demo-2">Disabled</a><a href="#radio-demo-3">Inline radio group</a><a href="#radio-demo-4">Vertical radio group</a><a href="#radio-demo-5">Radios with descriptions</a><a href="#radio-demo-6">Radio cards</a><a href="#radio-demo-7">Vertical radio cards</a><a href="#radio-demo-8">Right-aligned radio</a><a href="#radio-demo-9">Radio list group</a><a href="#radio-demo-10">Horizontal radio list group</a><a href="#radio-demo-11">Validation states</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,17 +3,30 @@ page RangeSliderDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Range Slider"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "range-slider-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "range-sliderField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Volume"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "range"
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter range slider"
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? "60"
|
||||||
|
state playground_min = ctx.url.searchParams.get("pg_min") ?? "0"
|
||||||
|
state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
|
||||||
|
state playground_step = ctx.url.searchParams.get("pg_step") ?? "5"
|
||||||
|
state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
|
||||||
|
state playground_showBounds = ctx.url.searchParams.get("pg_showBounds") ?? "true"
|
||||||
|
state playground_showSteps = ctx.url.searchParams.get("pg_showSteps") ?? "false"
|
||||||
|
state playground_marks = ctx.url.searchParams.get("pg_marks") ?? "[]"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Range Slider"
|
title = "Range Slider"
|
||||||
description = "Theme-aware, responsive range slider component."
|
description = "Theme-aware, responsive range slider component."
|
||||||
@@ -27,7 +40,7 @@ page RangeSliderDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Range Slider</h1>
|
<h1>Range Slider</h1>
|
||||||
<p>Theme-aware, responsive range slider component.</p>
|
<p>Theme-aware, responsive range slider component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>26 props</span><span>0 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,19 +49,25 @@ page RangeSliderDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="RangeSlider" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="RangeSlider" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" value="{playground_value}" min="{playground_min}" max="{playground_max}" step="{playground_step}" showValue="{playground_showValue}" showBounds="{playground_showBounds}" showSteps="{playground_showSteps}" marks="{playground_marks}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><RangeSlider
|
<pre><code data-playground-code><RangeSlider
|
||||||
value="sample-1"
|
id="range-slider-1"
|
||||||
placeholder="Enter a sample value"
|
name="range-sliderField"
|
||||||
|
label="Volume"
|
||||||
|
placeholder="Enter range slider"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Range Slider" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>string</small></span><input id="playground-range-slider-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-range-slider-type"><span><strong>type</strong><small>string</small></span><input id="playground-range-slider-type" name="pg_type" type="text" value="range" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>string</small></span><input id="playground-range-slider-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>string</small></span><input id="playground-range-slider-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>string</small></span><input id="playground-range-slider-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-range-slider-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-range-slider-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-range-slider-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="range-slider-1" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="range-sliderField" /></label><label class="playground-field" for="playground-range-slider-label"><span><strong>label</strong><small>string</small></span><input id="playground-range-slider-label" name="pg_label" type="text" value="Volume" /></label><label class="playground-toggle" for="playground-range-slider-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-range-slider-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-range-slider-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-range-slider-placeholder" name="pg_placeholder" type="text" value="Enter range slider" /></label><label class="playground-field" for="playground-range-slider-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-range-slider-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-range-slider-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-range-slider-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-range-slider-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-range-slider-value"><span><strong>value</strong><small>number</small></span><input id="playground-range-slider-value" name="pg_value" type="number" value="60" /></label><label class="playground-field" for="playground-range-slider-min"><span><strong>min</strong><small>number</small></span><input id="playground-range-slider-min" name="pg_min" type="number" value="0" /></label><label class="playground-field" for="playground-range-slider-max"><span><strong>max</strong><small>number</small></span><input id="playground-range-slider-max" name="pg_max" type="number" value="100" /></label><label class="playground-field" for="playground-range-slider-step"><span><strong>step</strong><small>number</small></span><input id="playground-range-slider-step" name="pg_step" type="number" value="5" /></label><label class="playground-toggle" for="playground-range-slider-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-range-slider-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showBounds"><span><strong>show Bounds</strong><small>boolean</small></span><input id="playground-range-slider-showBounds" name="pg_showBounds" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-range-slider-showSteps"><span><strong>show Steps</strong><small>boolean</small></span><input id="playground-range-slider-showSteps" name="pg_showSteps" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><lLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,70 +76,265 @@ page RangeSliderDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="range-slider-demo-1" class="demo-canvas demo-canvas--1">
|
<div id="range-slider-demo-1" class="demo-canvas demo-canvas--1">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="RangeSlider" size="default" label="Range Slider" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-1" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><RangeSlider
|
<pre><code><RangeSlider
|
||||||
value="sample-1"
|
id="range-slider-1"
|
||||||
placeholder="Enter a sample value"
|
name="range-sliderField"
|
||||||
|
label="Volume"
|
||||||
|
placeholder="Enter range slider"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="range-slider-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="range-slider-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="RangeSlider" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-2" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="true" marks="[{"value":0,"label":"0"},{"value":25,"label":"25"},{"value":50,"label":"50"},{"value":75,"label":"75"},{"value":100,"label":"100"}]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><RangeSlider
|
<pre><code><RangeSlider
|
||||||
size="sm"
|
id="range-slider-2"
|
||||||
label="Compact example"
|
name="range-sliderField"
|
||||||
value="sample-2"
|
label="Volume"
|
||||||
placeholder="Enter a sample value"
|
placeholder="Enter range slider"
|
||||||
|
variant="outlined"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
showSteps="true"
|
||||||
|
marks='[
|
||||||
|
{
|
||||||
|
"value": 0,
|
||||||
|
"label": "0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 25,
|
||||||
|
"label": "25"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 50,
|
||||||
|
"label": "50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 75,
|
||||||
|
"label": "75"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": 100,
|
||||||
|
"label": "100"
|
||||||
|
}
|
||||||
|
]'
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="range-slider-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="range-slider-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="RangeSlider" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-3" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><RangeSlider
|
<pre><code><RangeSlider
|
||||||
size="lg"
|
id="range-slider-3"
|
||||||
label="Advanced example"
|
name="range-sliderField"
|
||||||
value="sample-3"
|
label="Volume"
|
||||||
placeholder="Search by name, email, or identifier"
|
placeholder="Enter range slider"
|
||||||
|
variant="floating"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="range-slider-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"><div data-component="RangeSlider" size="sm" color="primary" id="range-slider-4" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="pill" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><RangeSlider
|
||||||
|
size="sm"
|
||||||
|
id="range-slider-4"
|
||||||
|
name="range-sliderField"
|
||||||
|
label="Volume"
|
||||||
|
placeholder="Enter range slider"
|
||||||
|
variant="pill"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="range-slider-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"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-5" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><RangeSlider
|
||||||
|
id="range-slider-5"
|
||||||
|
name="range-sliderField"
|
||||||
|
label="Volume"
|
||||||
|
placeholder="Enter range slider"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="range-slider-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"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-6" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><RangeSlider
|
||||||
|
id="range-slider-6"
|
||||||
|
name="range-sliderField"
|
||||||
|
label="Volume"
|
||||||
|
placeholder="Enter range slider"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="range-slider-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"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-7" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="We'll never share your details." cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><RangeSlider
|
||||||
|
id="range-slider-7"
|
||||||
|
name="range-sliderField"
|
||||||
|
label="Volume"
|
||||||
|
placeholder="Enter range slider"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="range-slider-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"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-8" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><RangeSlider
|
||||||
|
id="range-slider-8"
|
||||||
|
name="range-sliderField"
|
||||||
|
label="Volume"
|
||||||
|
placeholder="Enter range slider"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
cornerHint="Optional"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="range-slider-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-9" name="validatedField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><RangeSlider
|
||||||
|
id="range-slider-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Volume"
|
||||||
|
placeholder="Enter range slider"
|
||||||
|
value="60"
|
||||||
|
step="5"
|
||||||
|
marks='[]'
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Range Slider"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"range"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Range"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>min</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>step</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showBounds</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showSteps</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>marks</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#range-slider-demo-1">Production default</a><a href="#range-slider-demo-2">Compact application</a><a href="#range-slider-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#range-slider-demo-1">Default field</a><a href="#range-slider-demo-2">Outlined with start icon</a><a href="#range-slider-demo-3">Floating label</a><a href="#range-slider-demo-4">Pill and compact size</a><a href="#range-slider-demo-5">Read only</a><a href="#range-slider-demo-6">Disabled</a><a href="#range-slider-demo-7">Inline helper text</a><a href="#range-slider-demo-8">Field with corner hint</a><a href="#range-slider-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page RatingDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Rating</h1>
|
<h1>Rating</h1>
|
||||||
<p>Theme-aware, responsive rating component.</p>
|
<p>Theme-aware, responsive rating component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page RatingDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-rating-size"><span><strong>size</strong><small>string</small></span><select id="playground-rating-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-rating-color"><span><strong>color</strong><small>string</small></span><select id="playground-rating-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-rating-title"><span><strong>title</strong><small>string</small></span><input id="playground-rating-title" name="pg_title" type="text" value="Rating example" /></label><label class="playground-field" for="playground-rating-description"><span><strong>description</strong><small>string</small></span><input id="playground-rating-description" name="pg_description" type="text" value="A polished default rating for a modern application." /></label><label class="playground-field" for="playground-rating-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-rating-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-rating-size"><span><strong>size</strong><small>string</small></span><select id="playground-rating-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-rating-color"><span><strong>color</strong><small>string</small></span><select id="playground-rating-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-rating-title"><span><strong>title</strong><small>string</small></span><input id="playground-rating-title" name="pg_title" type="text" value="Rating example" /></label><label class="playground-field" for="playground-rating-description"><span><strong>description</strong><small>string</small></span><input id="playground-rating-description" name="pg_description" type="text" value="A polished default rating for a modern application." /></label><label class="playground-field" for="playground-rating-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-rating-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "rating-0-1",
|
"id": "rating-0-1",
|
||||||
"key": "rating-0-1",
|
"key": "rating-0-1",
|
||||||
@@ -649,11 +649,15 @@ page RatingDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Rating"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Rating"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#rating-demo-1">Production default</a><a href="#rating-demo-2">Compact application</a><a href="#rating-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#rating-demo-1">Production default</a><a href="#rating-demo-2">Compact application</a><a href="#rating-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page ScrollspyDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Scrollspy</h1>
|
<h1>Scrollspy</h1>
|
||||||
<p>Theme-aware, responsive scrollspy component.</p>
|
<p>Theme-aware, responsive scrollspy component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>1 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page ScrollspyDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-scrollspy-size"><span><strong>size</strong><small>string</small></span><select id="playground-scrollspy-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-scrollspy-color"><span><strong>color</strong><small>string</small></span><select id="playground-scrollspy-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-scrollspy-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-scrollspy-size"><span><strong>size</strong><small>string</small></span><select id="playground-scrollspy-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-scrollspy-color"><span><strong>color</strong><small>string</small></span><select id="playground-scrollspy-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-scrollspy-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "scrollspy-0-1",
|
"id": "scrollspy-0-1",
|
||||||
"key": "scrollspy-0-1",
|
"key": "scrollspy-0-1",
|
||||||
@@ -641,11 +641,15 @@ page ScrollspyDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('change', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="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>"Scrollspy"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Scrollspy"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#scrollspy-demo-1">Production default</a><a href="#scrollspy-demo-2">Compact application</a><a href="#scrollspy-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#scrollspy-demo-1">Production default</a><a href="#scrollspy-demo-2">Compact application</a><a href="#scrollspy-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ page SearchBoxDetail {
|
|||||||
<span class="showcase-eyebrow">Advanced Forms component</span>
|
<span class="showcase-eyebrow">Advanced Forms component</span>
|
||||||
<h1>Search Box</h1>
|
<h1>Search Box</h1>
|
||||||
<p>Theme-aware, responsive search box component.</p>
|
<p>Theme-aware, responsive search box component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -48,7 +48,7 @@ page SearchBoxDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-search-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-search-box-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-search-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-search-box-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-search-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-search-box-label" name="pg_label" type="text" value="Search Box" /></label><label class="playground-field" for="playground-search-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-search-box-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-search-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-search-box-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-search-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-search-box-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-search-box-type"><span><strong>type</strong><small>string</small></span><input id="playground-search-box-type" name="pg_type" type="text" value="search" /></label><label class="playground-field" for="playground-search-box-min"><span><strong>min</strong><small>string</small></span><input id="playground-search-box-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-search-box-max"><span><strong>max</strong><small>string</small></span><input id="playground-search-box-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-search-box-step"><span><strong>step</strong><small>string</small></span><input id="playground-search-box-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-search-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-search-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-search-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-search-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-search-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-search-box-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-search-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-search-box-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-search-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-search-box-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-search-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-search-box-label" name="pg_label" type="text" value="Search Box" /></label><label class="playground-field" for="playground-search-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-search-box-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-search-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-search-box-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-search-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-search-box-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-search-box-type"><span><strong>type</strong><small>string</small></span><input id="playground-search-box-type" name="pg_type" type="text" value="search" /></label><label class="playground-field" for="playground-search-box-min"><span><strong>min</strong><small>string</small></span><input id="playground-search-box-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-search-box-max"><span><strong>max</strong><small>string</small></span><input id="playground-search-box-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-search-box-step"><span><strong>step</strong><small>string</small></span><input id="playground-search-box-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-search-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-search-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-search-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-search-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-search-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-search-box-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -116,11 +116,15 @@ page SearchBoxDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@search</code><span>Fires when the search query changes or is submitted.</span></div><div><code>@submit</code><span>Fires when the component submits its value.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Search Box"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"search"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Search Box"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"search"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#search-box-demo-1">Production default</a><a href="#search-box-demo-2">Compact application</a><a href="#search-box-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#search-box-demo-1">Production default</a><a href="#search-box-demo-2">Compact application</a><a href="#search-box-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
+320
-544
@@ -3,14 +3,26 @@ page SelectDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Select"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "select-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "selectField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Team"
|
||||||
state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"id\": \"select-0-1\",\n \"key\": \"select-0-1\",\n \"value\": \"primary\",\n \"label\": \"Primary workflow\",\n \"title\": \"Primary workflow\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"A configurable sample message.\",\n \"href\": \"#select-demo\",\n \"actionHref\": \"#select-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": true,\n \"selected\": true,\n \"checked\": true,\n \"disabled\": false,\n \"outgoing\": false,\n \"open\": true,\n \"number\": 1,\n \"count\": 16,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 1\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n },\n {\n \"id\": \"select-0-2\",\n \"key\": \"select-0-2\",\n \"value\": \"secondary\",\n \"label\": \"Additional option\",\n \"title\": \"Supporting example\",\n \"description\": \"A clean default configuration for everyday product interfaces.\",\n \"text\": \"Another configurable message.\",\n \"href\": \"#select-demo\",\n \"actionHref\": \"#select-demo\",\n \"actionLabel\": \"View details\",\n \"icon\": \"icon-[lucide--sparkles]\",\n \"iconClass\": \"icon-[lucide--sparkles]\",\n \"variant\": \"primary\",\n \"status\": \"Active\",\n \"time\": \"09:30\",\n \"current\": false,\n \"selected\": false,\n \"checked\": false,\n \"disabled\": false,\n \"outgoing\": true,\n \"open\": true,\n \"number\": 2,\n \"count\": 32,\n \"percentage\": 72,\n \"color\": \"#7c3aed\",\n \"target\": \"_self\",\n \"ariaLabel\": \"Open primary workflow 2\",\n \"items\": [\n {\n \"label\": \"Nested option A\",\n \"value\": \"nested-a\"\n },\n {\n \"label\": \"Nested option B\",\n \"value\": \"nested-b\"\n }\n ],\n \"links\": [\n {\n \"label\": \"Documentation\",\n \"href\": \"#documentation\"\n },\n {\n \"label\": \"API reference\",\n \"href\": \"#api-reference\"\n }\n ],\n \"values\": [\n \"Included\",\n \"Standard\"\n ]\n }\n]"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
||||||
|
state playground_values = ctx.url.searchParams.get("pg_values") ?? ""
|
||||||
|
state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n {\n \"label\": \"Engineering\",\n \"value\": \"engineering\"\n },\n {\n \"label\": \"Design\",\n \"value\": \"design\"\n },\n {\n \"label\": \"Marketing\",\n \"value\": \"marketing\"\n }\n]"
|
||||||
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter select"
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
|
state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Select"
|
title = "Select"
|
||||||
description = "Theme-aware, responsive select component."
|
description = "Theme-aware, responsive select component."
|
||||||
@@ -24,7 +36,7 @@ page SelectDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Select</h1>
|
<h1>Select</h1>
|
||||||
<p>Theme-aware, responsive select component.</p>
|
<p>Theme-aware, responsive select component.</p>
|
||||||
<div class="detail-badges"><span>10 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>22 props</span><span>0 slots</span><span>7 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -33,234 +45,49 @@ page SelectDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Select" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" options="{playground_options}" placeholder="{playground_placeholder}" multiple="{playground_multiple}" disabled="{playground_disabled}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Select" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" value="{playground_value}" values="{playground_values}" options="{playground_options}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" multiple="{playground_multiple}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Select
|
<pre><code data-playground-code><Select
|
||||||
value="sample-1"
|
id="select-1"
|
||||||
|
name="selectField"
|
||||||
|
label="Team"
|
||||||
options='[
|
options='[
|
||||||
{
|
{
|
||||||
"id": "select-0-1",
|
"label": "Engineering",
|
||||||
"key": "select-0-1",
|
"value": "engineering"
|
||||||
"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",
|
"label": "Design",
|
||||||
"key": "select-0-2",
|
"value": "design"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Marketing",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"value": "marketing"
|
||||||
"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"
|
placeholder="Enter select"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-select-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-select-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-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-select-label" name="pg_label" type="text" value="Select" /></label><label class="playground-field" for="playground-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-select-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-select-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-select-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-select-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-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-select-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-select-id"><span><strong>id</strong><small>string</small></span><input id="playground-select-id" name="pg_id" type="text" value="select-1" /></label><label class="playground-field" for="playground-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-select-name" name="pg_name" type="text" value="selectField" /></label><label class="playground-field" for="playground-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-select-label" name="pg_label" type="text" value="Team" /></label><label class="playground-toggle" for="playground-select-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-select-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-select-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-select-values"><span><strong>values</strong><small>string</small></span><textarea id="playground-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "select-0-1",
|
"label": "Engineering",
|
||||||
"key": "select-0-1",
|
"value": "engineering"
|
||||||
"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",
|
"label": "Design",
|
||||||
"key": "select-0-2",
|
"value": "design"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Marketing",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"value": "marketing"
|
||||||
"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"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-select-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-toggle" for="playground-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-select-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-select-placeholder" name="pg_placeholder" type="text" value="Enter select" /></label><label class="playground-field" for="playground-select-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-select-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="floating">floating</option></select></label><label class="playground-field" for="playground-select-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-select-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-select-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-select-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-select-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-select-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-select-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-select-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-select-error"><span><strong>error</strong><small>string</small></span><input id="playground-select-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-select-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-select-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-select-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-select-class" name="pg_class" type="text" value="" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -269,394 +96,343 @@ page SelectDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="select-demo-1" class="demo-canvas demo-canvas--1">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Select" size="default" label="Select" value="sample-1" 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" multiple="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Select" size="default" color="primary" id="select-1" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Select
|
<pre><code><Select
|
||||||
value="sample-1"
|
id="select-1"
|
||||||
|
name="selectField"
|
||||||
|
label="Team"
|
||||||
options='[
|
options='[
|
||||||
{
|
{
|
||||||
"id": "select-0-1",
|
"label": "Engineering",
|
||||||
"key": "select-0-1",
|
"value": "engineering"
|
||||||
"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",
|
"label": "Design",
|
||||||
"key": "select-0-2",
|
"value": "design"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Marketing",
|
||||||
"description": "A clean default configuration for everyday product interfaces.",
|
"value": "marketing"
|
||||||
"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"
|
placeholder="Enter select"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="select-demo-2" class="demo-canvas demo-canvas--2">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Select" size="sm" label="Compact example" value="sample-2" 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" multiple="false" disabled="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Select" size="default" color="primary" id="select-2" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Select
|
<pre><code><Select
|
||||||
size="sm"
|
id="select-2"
|
||||||
label="Compact example"
|
name="selectField"
|
||||||
value="sample-2"
|
label="Team"
|
||||||
options='[
|
options='[
|
||||||
{
|
{
|
||||||
"id": "select-1-1",
|
"label": "Engineering",
|
||||||
"key": "select-1-1",
|
"value": "engineering"
|
||||||
"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",
|
"label": "Design",
|
||||||
"key": "select-1-2",
|
"value": "design"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Marketing",
|
||||||
"description": "A compact configuration designed for dense application layouts.",
|
"value": "marketing"
|
||||||
"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"
|
placeholder="Enter select"
|
||||||
|
variant="outlined"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="select-demo-3" class="demo-canvas demo-canvas--3">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Select" size="lg" label="Advanced example" value="sample-3" 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" multiple="false" disabled="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Select" size="default" color="primary" id="select-3" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Select
|
<pre><code><Select
|
||||||
size="lg"
|
id="select-3"
|
||||||
label="Advanced example"
|
name="selectField"
|
||||||
value="sample-3"
|
label="Team"
|
||||||
options='[
|
options='[
|
||||||
{
|
{
|
||||||
"id": "select-2-1",
|
"label": "Engineering",
|
||||||
"key": "select-2-1",
|
"value": "engineering"
|
||||||
"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",
|
"label": "Design",
|
||||||
"key": "select-2-2",
|
"value": "design"
|
||||||
"value": "secondary",
|
},
|
||||||
"label": "Additional option",
|
{
|
||||||
"title": "Supporting example",
|
"label": "Marketing",
|
||||||
"description": "A richer configuration with more supporting information and actions.",
|
"value": "marketing"
|
||||||
"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"
|
placeholder="Enter select"
|
||||||
|
variant="floating"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Select" size="sm" color="primary" id="select-4" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="pill" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Select
|
||||||
|
size="sm"
|
||||||
|
id="select-4"
|
||||||
|
name="selectField"
|
||||||
|
label="Team"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Engineering",
|
||||||
|
"value": "engineering"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Design",
|
||||||
|
"value": "design"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Marketing",
|
||||||
|
"value": "marketing"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
placeholder="Enter select"
|
||||||
|
variant="pill"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Select" size="default" color="primary" id="select-5" name="selectField" label="Team" value="design" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Select
|
||||||
|
id="select-5"
|
||||||
|
name="selectField"
|
||||||
|
label="Team"
|
||||||
|
value="design"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Engineering",
|
||||||
|
"value": "engineering"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Design",
|
||||||
|
"value": "design"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Marketing",
|
||||||
|
"value": "marketing"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
placeholder="Enter select"
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Select" size="default" color="primary" id="select-6" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Select
|
||||||
|
id="select-6"
|
||||||
|
name="selectField"
|
||||||
|
label="Team"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Engineering",
|
||||||
|
"value": "engineering"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Design",
|
||||||
|
"value": "design"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Marketing",
|
||||||
|
"value": "marketing"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
placeholder="Enter select"
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Select" size="default" color="primary" id="select-7" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="We'll never share your details." cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Select
|
||||||
|
id="select-7"
|
||||||
|
name="selectField"
|
||||||
|
label="Team"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Engineering",
|
||||||
|
"value": "engineering"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Design",
|
||||||
|
"value": "design"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Marketing",
|
||||||
|
"value": "marketing"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
placeholder="Enter select"
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><div data-component="Select" size="default" color="primary" id="select-8" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Select
|
||||||
|
id="select-8"
|
||||||
|
name="selectField"
|
||||||
|
label="Team"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Engineering",
|
||||||
|
"value": "engineering"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Design",
|
||||||
|
"value": "design"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Marketing",
|
||||||
|
"value": "marketing"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
placeholder="Enter select"
|
||||||
|
cornerHint="Optional"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Select" size="default" color="primary" id="select-9" name="validatedField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Select
|
||||||
|
id="select-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Team"
|
||||||
|
options='[
|
||||||
|
{
|
||||||
|
"label": "Engineering",
|
||||||
|
"value": "engineering"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Design",
|
||||||
|
"value": "design"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Marketing",
|
||||||
|
"value": "marketing"
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
placeholder="Enter select"
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Select"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Select an option"</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>"Select"</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>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>values</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Select an option"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#select-demo-1">Production default</a><a href="#select-demo-2">Compact application</a><a href="#select-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#select-demo-1">Default field</a><a href="#select-demo-2">Outlined with start icon</a><a href="#select-demo-3">Floating label</a><a href="#select-demo-4">Pill and compact size</a><a href="#select-demo-5">Read only</a><a href="#select-demo-6">Disabled</a><a href="#select-demo-7">Inline helper text</a><a href="#select-demo-8">Field with corner hint</a><a href="#select-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page SidebarDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Sidebar</h1>
|
<h1>Sidebar</h1>
|
||||||
<p>Theme-aware, responsive sidebar component.</p>
|
<p>Theme-aware, responsive sidebar component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page SidebarDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-sidebar-size"><span><strong>size</strong><small>string</small></span><select id="playground-sidebar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-sidebar-color"><span><strong>color</strong><small>string</small></span><select id="playground-sidebar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-sidebar-label"><span><strong>label</strong><small>string</small></span><input id="playground-sidebar-label" name="pg_label" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-sidebar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-sidebar-size"><span><strong>size</strong><small>string</small></span><select id="playground-sidebar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-sidebar-color"><span><strong>color</strong><small>string</small></span><select id="playground-sidebar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-sidebar-label"><span><strong>label</strong><small>string</small></span><input id="playground-sidebar-label" name="pg_label" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-sidebar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "sidebar-0-1",
|
"id": "sidebar-0-1",
|
||||||
"key": "sidebar-0-1",
|
"key": "sidebar-0-1",
|
||||||
@@ -641,11 +641,15 @@ page SidebarDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('toggle', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#sidebar-demo-1">Production default</a><a href="#sidebar-demo-2">Compact application</a><a href="#sidebar-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#sidebar-demo-1">Production default</a><a href="#sidebar-demo-2">Compact application</a><a href="#sidebar-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ page SkeletonDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<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>
|
<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>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-skeleton-color"><span><strong>color</strong><small>string</small></span><select id="playground-skeleton-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-skeleton-label"><span><strong>label</strong><small>string</small></span><input id="playground-skeleton-label" name="pg_label" type="text" value="Skeleton" /></label><label class="playground-field" for="playground-skeleton-size"><span><strong>size</strong><small>string</small></span><select id="playground-skeleton-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="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-skeleton-lines"><span><strong>lines</strong><small>number</small></span><input id="playground-skeleton-lines" name="pg_lines" type="number" value="3" /></label><label class="playground-field" for="playground-skeleton-class"><span><strong>class</strong><small>string</small></span><input id="playground-skeleton-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-skeleton-color"><span><strong>color</strong><small>string</small></span><select id="playground-skeleton-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-skeleton-label"><span><strong>label</strong><small>string</small></span><input id="playground-skeleton-label" name="pg_label" type="text" value="Skeleton" /></label><label class="playground-field" for="playground-skeleton-size"><span><strong>size</strong><small>string</small></span><select id="playground-skeleton-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-skeleton-lines"><span><strong>lines</strong><small>number</small></span><input id="playground-skeleton-lines" name="pg_lines" type="number" value="3" /></label><label class="playground-field" for="playground-skeleton-class"><span><strong>class</strong><small>string</small></span><input id="playground-skeleton-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -102,11 +102,11 @@ page SkeletonDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>
|
<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>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#skeleton-demo-1">Production default</a><a href="#skeleton-demo-2">Compact application</a><a href="#skeleton-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#skeleton-demo-1">Production default</a><a href="#skeleton-demo-2">Compact application</a><a href="#skeleton-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ page SpinnerDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<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>
|
<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>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-spinner-color"><span><strong>color</strong><small>string</small></span><select id="playground-spinner-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-spinner-label"><span><strong>label</strong><small>string</small></span><input id="playground-spinner-label" name="pg_label" type="text" value="Spinner" /></label><label class="playground-field" for="playground-spinner-size"><span><strong>size</strong><small>string</small></span><select id="playground-spinner-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="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-spinner-lines"><span><strong>lines</strong><small>number</small></span><input id="playground-spinner-lines" name="pg_lines" type="number" value="3" /></label><label class="playground-field" for="playground-spinner-class"><span><strong>class</strong><small>string</small></span><input id="playground-spinner-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-spinner-color"><span><strong>color</strong><small>string</small></span><select id="playground-spinner-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-spinner-label"><span><strong>label</strong><small>string</small></span><input id="playground-spinner-label" name="pg_label" type="text" value="Spinner" /></label><label class="playground-field" for="playground-spinner-size"><span><strong>size</strong><small>string</small></span><select id="playground-spinner-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-spinner-lines"><span><strong>lines</strong><small>number</small></span><input id="playground-spinner-lines" name="pg_lines" type="number" value="3" /></label><label class="playground-field" for="playground-spinner-class"><span><strong>class</strong><small>string</small></span><input id="playground-spinner-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -102,11 +102,11 @@ page SpinnerDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>
|
<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>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#spinner-demo-1">Production default</a><a href="#spinner-demo-2">Compact application</a><a href="#spinner-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#spinner-demo-1">Production default</a><a href="#spinner-demo-2">Compact application</a><a href="#spinner-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page StepperDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Stepper</h1>
|
<h1>Stepper</h1>
|
||||||
<p>Theme-aware, responsive stepper component.</p>
|
<p>Theme-aware, responsive stepper component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page StepperDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-stepper-size"><span><strong>size</strong><small>string</small></span><select id="playground-stepper-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-stepper-color"><span><strong>color</strong><small>string</small></span><select id="playground-stepper-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-stepper-label"><span><strong>label</strong><small>string</small></span><input id="playground-stepper-label" name="pg_label" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-stepper-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-stepper-size"><span><strong>size</strong><small>string</small></span><select id="playground-stepper-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-stepper-color"><span><strong>color</strong><small>string</small></span><select id="playground-stepper-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-stepper-label"><span><strong>label</strong><small>string</small></span><input id="playground-stepper-label" name="pg_label" type="text" value="Stepper" /></label><label class="playground-field" for="playground-stepper-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-stepper-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "stepper-0-1",
|
"id": "stepper-0-1",
|
||||||
"key": "stepper-0-1",
|
"key": "stepper-0-1",
|
||||||
@@ -641,11 +641,15 @@ page StepperDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@previous</code><span>Fires when the component emits the previous event.</span></div><div><code>@next</code><span>Fires when the component emits the next event.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('change', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="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>"Stepper"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Stepper"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#stepper-demo-1">Production default</a><a href="#stepper-demo-2">Compact application</a><a href="#stepper-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#stepper-demo-1">Production default</a><a href="#stepper-demo-2">Compact application</a><a href="#stepper-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ page StrongPasswordDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>27 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>27 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-strong-password-size"><span><strong>size</strong><small>string</small></span><select id="playground-strong-password-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-strong-password-color"><span><strong>color</strong><small>string</small></span><select id="playground-strong-password-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-strong-password-label"><span><strong>label</strong><small>string</small></span><input id="playground-strong-password-label" name="pg_label" type="text" value="Live strength meter" /></label><label class="playground-field" for="playground-strong-password-name"><span><strong>name</strong><small>string</small></span><input id="playground-strong-password-name" name="pg_name" type="text" value="strong-password-1" /></label><label class="playground-field" for="playground-strong-password-value"><span><strong>value</strong><small>string</small></span><input id="playground-strong-password-value" name="pg_value" type="text" value="Northstar!2026" /></label><label class="playground-field" for="playground-strong-password-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-strong-password-placeholder" name="pg_placeholder" type="text" value="Create a strong password" /></label><label class="playground-field" for="playground-strong-password-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-strong-password-autocomplete" name="pg_autocomplete" type="text" value="new-password" /></label><label class="playground-field" for="playground-strong-password-minLength"><span><strong>min Length</strong><small>number</small></span><input id="playground-strong-password-minLength" name="pg_minLength" type="number" value="8" /></label><label class="playground-field" for="playground-strong-password-specialCharactersSet"><span><strong>special Characters Set</strong><small>string</small></span><input id="playground-strong-password-specialCharactersSet" name="pg_specialCharactersSet" type="text" value="!@#$%^&*()_+-=[]{}|;:,.<>?" /></label><label class="playground-toggle" for="playground-strong-password-requireLowercase"><span><strong>require Lowercase</strong><small>boolean</small></span><input id="playground-strong-password-requireLowercase" name="pg_requireLowercase" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-strong-password-requireUppercase"><span><strong>require Uppercase</strong><small>boolean</small></span><input id="playground-strong-password-requireUppercase" name="pg_requireUppercase" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-strong-password-requireNumber"><span><strong>require Number</strong><small>boolean</small></span><input id="playground-strong-password-requireNumber" name="pg_requireNumber" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-strong-password-requireSpecialCharacter"><span><strong>require Special Character</strong><small>boolean</small></span><input id="playground-strong-password-requireSpecialCharacter" name="pg_requireSpecialCharacter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-strong-password-showRequirements"><span><strong>show Requirements</strong><small>boolean</small></span><input id="playground-strong-password-showRequirements" name="pg_showRequirements" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-strong-password-presentation"><span><strong>presentation</strong><small>string</small></span><input id="playground-strong-password-presentation" name="pg_presentation" type="text" value="inline" /></label><label class="playground-field" for="playground-strong-password-hintText"><span><strong>hint Text</strong><small>string</small></span><input id="playground-strong-password-hintText" name="pg_hintText" type="text" value="" /></label><label class="playground-field" for="playground-strong-password-emptyLabeLine truncated
|
<div class="playground-fields"><label class="playground-field" for="playground-strong-password-size"><span><strong>size</strong><small>string</small></span><select id="playground-strong-password-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-strong-password-color"><span><strong>color</strong><small>string</small></span><select id="playground-strong-password-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-strong-password-label"><span><strong>label</strong><small>string</small></span><input id="playground-strong-password-label" name="pg_label" type="text" value="Live strength meter" /></label><label class="playground-field" for="playground-strong-password-name"><span><strong>name</strong><small>string</small></span><input id="playground-strong-password-name" name="pg_name" type="text" value="strong-password-1" /></label><label class="playground-field" for="playground-strong-password-value"><span><strong>value</strong><small>string</small></span><input id="playground-strong-password-value" name="pg_value" type="text" value="Northstar!2026" /></label><label class="playground-field" for="playground-strong-password-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-strong-password-placeholder" name="pg_placeholder" type="text" value="Create a strong password" /></label><label class="playground-field" for="playground-strong-password-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-strong-password-autocomplete" name="pg_autocomplete" type="text" value="new-password" /></label><label class="playground-field" for="playground-strong-password-minLength"><span><strong>min Length</strong><small>number</small></span><input id="playground-strong-password-minLength" name="pg_minLength" type="number" value="8" /></label><label class="playground-field" for="playground-strong-password-specialCharactersSet"><span><strong>special Characters Set</strong><small>string</small></span><input id="playground-strong-password-specialCharactersSet" name="pg_specialCharactersSet" type="text" value="!@#$%^&*()_+-=[]{}|;:,.<>?" /></label><label class="playground-toggle" for="playground-strong-password-requireLowercase"><span><strong>require Lowercase</strong><small>boolean</small></span><input id="playground-strong-password-requireLowercase" name="pg_requireLowercase" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-strong-password-requireUppercase"><span><strong>require Uppercase</strong><small>boolean</small></span><input id="playground-strong-password-requireUppercase" name="pg_requireUppercase" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-strong-password-requireNumber"><span><strong>require Number</strong><small>boolean</small></span><input id="playground-strong-password-requireNumber" name="pg_requireNumber" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-strong-password-requireSpecialCharacter"><span><strong>require Special Character</strong><small>boolean</small></span><input id="playground-strong-password-requireSpecialCharacter" name="pg_requireSpecialCharacter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-strong-password-showRequirements"><span><strong>show Requirements</strong><small>boolean</small></span><input id="playground-strong-password-showRequirements" name="pg_showRequirements" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-strong-password-presentation"><span><strong>presentation</strong><small>string</small></span><input id="playground-strong-password-presentation" name="pg_presentation" type="text" value="inline" /></label><label class="playground-field" for="playground-strong-password-hintText"><span><strong>hint Text</strong><small>string</small></span><input id="playground-strong-password-hintText" name="pg_hintText" type="text" value="" /></label><label class=Line truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -192,14 +192,9 @@ page StrongPasswordDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every interaction</h2><p>Events are declared with <code>@event</code>, bubble from the component root, and expose their state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the password value changes.</span></div><div><code>@change</code><span>Fires when the password input commits a change.</span></div><div><code>@strength</code><span>Fires with the current score, percentage, and strength level.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-wrn-strong-password]")
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@strength</code><span>Fires when the component emits the strength event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
component.addEventListener("select", (event) => {
|
component.addEventListener('input', (event) => {
|
||||||
console.log(event.detail.value)
|
|
||||||
console.log(event.detail.complete)
|
|
||||||
})
|
|
||||||
|
|
||||||
component.addEventListener("load", (event) => {
|
|
||||||
console.log(event.detail)
|
console.log(event.detail)
|
||||||
})</code></pre></section></div></section>
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Password"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"password"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Create a strong password"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"new-password"</code></td><td>No</td></tr><tr><td><code>minLength</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>specialCharactersSet</code></td><td>string</td><td><code>"!@#$%^&*()_+-=[]{}|;:,.<>?"</code></td><td>No</td></tr><tr><td><code>requireLowercase</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireUppercase</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireNumber</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireSpecialCharacter</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showRequirements</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>presentation</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>hintText</code></td><td>string</td><td><code>"Use a unique password you do not use elsewhere."</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"Enter a password"</code></td><td>No</td></tr><tr><td><code>weakLabel</code></td><td>string</td><td><code>"Weak"</code></td><td>No</td></tr><tr><td><code>fairLabel</code></td><td>string</td><td><code>"Fair"</code></td><td>No</td></tr><tr><td><code>goodLabel</code></td><td>string</td><td><code>"Good"</code></td><td>No</td></tr><tr><td><code>strongLabel</code></td><td>string</td><td><code>"Strong"</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>readonly</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Password"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"password"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Create a strong password"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"new-password"</code></td><td>No</td></tr><tr><td><code>minLength</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>specialCharactersSet</code></td><td>string</td><td><code>"!@#$%^&*()_+-=[]{}|;:,.<>?"</code></td><td>No</td></tr><tr><td><code>requireLowercase</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireUppercase</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireNumber</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireSpecialCharacter</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showRequirements</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>presentation</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>hintText</code></td><td>string</td><td><code>"Use a unique password you do not use elsewhere."</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"Enter a password"</code></td><td>No</td></tr><tr><td><code>weakLabel</code></td><td>string</td><td><code>"Weak"</code></td><td>No</td></tr><tr><td><code>fairLabel</code></td><td>string</td><td><code>"Fair"</code></td><td>No</td></tr><tr><td><code>goodLabel</code></td><td>string</td><td><code>"Good"</code></td><td>No</td></tr><tr><td><code>strongLabel</code></td><td>string</td><td><code>"Strong"</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>readonly</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</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>
|
||||||
|
|||||||
@@ -150,7 +150,7 @@ page StyledIconDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-styled-icon-size"><span><strong>size</strong><small>string</small></span><select id="playground-styled-icon-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-styled-icon-color"><span><strong>color</strong><small>string</small></span><select id="playground-styled-icon-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-styled-icon-title"><span><strong>title</strong><small>string</small></span><input id="playground-styled-icon-title" name="pg_title" type="text" value="Styled Icon example" /></label><label class="playground-field" for="playground-styled-icon-description"><span><strong>description</strong><small>string</small></span><input id="playground-styled-icon-description" name="pg_description" type="text" value="A polished default styled icon for a modern application." /></label><label class="playground-field" for="playground-styled-icon-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-styled-icon-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-styled-icon-size"><span><strong>size</strong><small>string</small></span><select id="playground-styled-icon-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-styled-icon-color"><span><strong>color</strong><small>string</small></span><select id="playground-styled-icon-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-styled-icon-title"><span><strong>title</strong><small>string</small></span><input id="playground-styled-icon-title" name="pg_title" type="text" value="Styled Icon example" /></label><label class="playground-field" for="playground-styled-icon-description"><span><strong>description</strong><small>string</small></span><input id="playground-styled-icon-description" name="pg_description" type="text" value="A polished default styled icon for a modern application." /></label><label class="playground-field" for="playground-styled-icon-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-styled-icon-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "styled-icon-0-1",
|
"id": "styled-icon-0-1",
|
||||||
"key": "styled-icon-0-1",
|
"key": "styled-icon-0-1",
|
||||||
@@ -649,11 +649,11 @@ page StyledIconDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#styled-icon-demo-1">Production default</a><a href="#styled-icon-demo-2">Compact application</a><a href="#styled-icon-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#styled-icon-demo-1">Production default</a><a href="#styled-icon-demo-2">Compact application</a><a href="#styled-icon-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
+203
-27
@@ -3,12 +3,24 @@ page SwitchDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Switch"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "switch-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "switchField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Email notifications"
|
||||||
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter switch"
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
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") ?? "enabled"
|
||||||
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false"
|
state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Switch"
|
title = "Switch"
|
||||||
description = "Theme-aware, responsive switch component."
|
description = "Theme-aware, responsive switch component."
|
||||||
@@ -22,7 +34,7 @@ page SwitchDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Switch</h1>
|
<h1>Switch</h1>
|
||||||
<p>Theme-aware, responsive switch component.</p>
|
<p>Theme-aware, responsive switch component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>20 props</span><span>0 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -31,18 +43,23 @@ page SwitchDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Switch" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" checked="{playground_checked}" disabled="{playground_disabled}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Switch" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" value="{playground_value}" checked="{playground_checked}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Switch
|
<pre><code data-playground-code><Switch
|
||||||
value="sample-1"
|
id="switch-1"
|
||||||
|
name="switchField"
|
||||||
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
value="enabled"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>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="lg">lg</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-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-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-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-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-field" for="playground-switch-class"><span><strong>class</strong><small>string</small></span><input id="playground-switch-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<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="switch-1" /></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="switchField" /></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="Email notifications" /></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 switch" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-switch-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-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></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="enabled" /></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="Helpful context for this field." /></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="pgLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -51,67 +68,226 @@ page SwitchDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="switch-demo-1" class="demo-canvas demo-canvas--1">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Switch" size="default" label="Switch" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Switch" size="default" color="primary" id="switch-1" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Switch
|
<pre><code><Switch
|
||||||
value="sample-1"
|
id="switch-1"
|
||||||
|
name="switchField"
|
||||||
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
value="enabled"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="switch-demo-2" class="demo-canvas demo-canvas--2">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Switch" size="sm" label="Compact example" value="sample-2" checked="false" disabled="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Switch" size="default" color="primary" id="switch-2" name="switchField" label="Email notifications" placeholder="Enter switch" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Switch
|
<pre><code><Switch
|
||||||
size="sm"
|
id="switch-2"
|
||||||
label="Compact example"
|
name="switchField"
|
||||||
value="sample-2"
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
variant="outlined"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
value="enabled"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="switch-demo-3" class="demo-canvas demo-canvas--3">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Switch" size="lg" label="Advanced example" value="sample-3" checked="false" disabled="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Switch" size="default" color="primary" id="switch-3" name="switchField" label="Email notifications" placeholder="Enter switch" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Switch
|
<pre><code><Switch
|
||||||
size="lg"
|
id="switch-3"
|
||||||
label="Advanced example"
|
name="switchField"
|
||||||
value="sample-3"
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
variant="floating"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
value="enabled"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="switch-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"><div data-component="Switch" size="sm" color="primary" id="switch-4" name="switchField" label="Email notifications" placeholder="Enter switch" variant="pill" icon="" iconPosition="start" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Switch
|
||||||
|
size="sm"
|
||||||
|
id="switch-4"
|
||||||
|
name="switchField"
|
||||||
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
variant="pill"
|
||||||
|
value="enabled"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="switch-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"><div data-component="Switch" size="default" color="primary" id="switch-5" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="true" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Switch
|
||||||
|
id="switch-5"
|
||||||
|
name="switchField"
|
||||||
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
value="enabled"
|
||||||
|
checked="true"
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="switch-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"><div data-component="Switch" size="default" color="primary" id="switch-6" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Switch
|
||||||
|
id="switch-6"
|
||||||
|
name="switchField"
|
||||||
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
value="enabled"
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="switch-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"><div data-component="Switch" size="default" color="primary" id="switch-7" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="We'll never share your details." cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Switch
|
||||||
|
id="switch-7"
|
||||||
|
name="switchField"
|
||||||
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
value="enabled"
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="switch-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"><div data-component="Switch" size="default" color="primary" id="switch-8" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Switch
|
||||||
|
id="switch-8"
|
||||||
|
name="switchField"
|
||||||
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
value="enabled"
|
||||||
|
cornerHint="Optional"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="switch-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Switch" size="default" color="primary" id="switch-9" name="validatedField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Switch
|
||||||
|
id="switch-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Email notifications"
|
||||||
|
placeholder="Enter switch"
|
||||||
|
value="enabled"
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Switch"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"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>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#switch-demo-1">Production default</a><a href="#switch-demo-2">Compact application</a><a href="#switch-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#switch-demo-1">Default field</a><a href="#switch-demo-2">Outlined with start icon</a><a href="#switch-demo-3">Floating label</a><a href="#switch-demo-4">Pill and compact size</a><a href="#switch-demo-5">Read only</a><a href="#switch-demo-6">Disabled</a><a href="#switch-demo-7">Inline helper text</a><a href="#switch-demo-8">Field with corner hint</a><a href="#switch-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page TableDetail {
|
|||||||
<span class="showcase-eyebrow">Tables component</span>
|
<span class="showcase-eyebrow">Tables component</span>
|
||||||
<h1>Table</h1>
|
<h1>Table</h1>
|
||||||
<p>Theme-aware, responsive table component.</p>
|
<p>Theme-aware, responsive table component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -257,7 +257,7 @@ page TableDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-table-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-table-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-table-caption"><span><strong>caption</strong><small>string</small></span><input id="playground-table-caption" name="pg_caption" type="text" value="Table" /></label><label class="playground-field" for="playground-table-columns"><span><strong>columns</strong><small>string</small></span><textarea id="playground-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-table-size"><span><strong>size</strong><small>string</small></span><select id="playground-table-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-table-color"><span><strong>color</strong><small>string</small></span><select id="playground-table-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-table-caption"><span><strong>caption</strong><small>string</small></span><input id="playground-table-caption" name="pg_caption" type="text" value="Table" /></label><label class="playground-field" for="playground-table-columns"><span><strong>columns</strong><small>string</small></span><textarea id="playground-table-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "table-0-1",
|
"id": "table-0-1",
|
||||||
"key": "table-0-1",
|
"key": "table-0-1",
|
||||||
@@ -1182,11 +1182,15 @@ page TableDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@sort</code><span>Fires when the component emits the sort event.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@rowClick</code><span>Fires when the component emits the row Click event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('sort', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>caption</code></td><td>string</td><td><code>"Table"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>rows</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>striped</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>caption</code></td><td>string</td><td><code>"Table"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>rows</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>striped</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#table-demo-1">Production default</a><a href="#table-demo-2">Compact application</a><a href="#table-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#table-demo-1">Production default</a><a href="#table-demo-2">Compact application</a><a href="#table-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page TabsDetail {
|
|||||||
<span class="showcase-eyebrow">Navigation component</span>
|
<span class="showcase-eyebrow">Navigation component</span>
|
||||||
<h1>Tabs</h1>
|
<h1>Tabs</h1>
|
||||||
<p>Theme-aware, responsive tabs component.</p>
|
<p>Theme-aware, responsive tabs component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -148,7 +148,7 @@ page TabsDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-tabs-size"><span><strong>size</strong><small>string</small></span><select id="playground-tabs-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-tabs-color"><span><strong>color</strong><small>string</small></span><select id="playground-tabs-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-tabs-label"><span><strong>label</strong><small>string</small></span><input id="playground-tabs-label" name="pg_label" type="text" value="Tabs" /></label><label class="playground-field" for="playground-tabs-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-tabs-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-tabs-size"><span><strong>size</strong><small>string</small></span><select id="playground-tabs-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-tabs-color"><span><strong>color</strong><small>string</small></span><select id="playground-tabs-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-tabs-label"><span><strong>label</strong><small>string</small></span><input id="playground-tabs-label" name="pg_label" type="text" value="Tabs" /></label><label class="playground-field" for="playground-tabs-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-tabs-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "tabs-0-1",
|
"id": "tabs-0-1",
|
||||||
"key": "tabs-0-1",
|
"key": "tabs-0-1",
|
||||||
@@ -641,11 +641,15 @@ page TabsDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('change', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Tabs"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Tabs"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#tabs-demo-1">Production default</a><a href="#tabs-demo-2">Compact application</a><a href="#tabs-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#tabs-demo-1">Production default</a><a href="#tabs-demo-2">Compact application</a><a href="#tabs-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,14 +3,27 @@ page TextareaDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Textarea"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "textarea-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "textareaField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Description"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "5"
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter textarea"
|
||||||
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
||||||
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_rows = ctx.url.searchParams.get("pg_rows") ?? "4"
|
||||||
|
state playground_resize = ctx.url.searchParams.get("pg_resize") ?? "vertical"
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? ""
|
||||||
|
state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? ""
|
||||||
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Textarea"
|
title = "Textarea"
|
||||||
description = "Theme-aware, responsive textarea component."
|
description = "Theme-aware, responsive textarea component."
|
||||||
@@ -24,7 +37,7 @@ page TextareaDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Textarea</h1>
|
<h1>Textarea</h1>
|
||||||
<p>Theme-aware, responsive textarea component.</p>
|
<p>Theme-aware, responsive textarea component.</p>
|
||||||
<div class="detail-badges"><span>10 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>23 props</span><span>0 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -33,19 +46,23 @@ page TextareaDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="Textarea" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" rows="{playground_rows}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="Textarea" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" value="{playground_value}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" rows="{playground_rows}" resize="{playground_resize}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" minlength="{playground_minlength}" maxlength="{playground_maxlength}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><Textarea
|
<pre><code data-playground-code><Textarea
|
||||||
value="sample-1"
|
id="textarea-1"
|
||||||
placeholder="Enter a sample value"
|
name="textareaField"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter textarea"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
|
rows="4"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-textarea-size"><span><strong>size</strong><small>string</small></span><select id="playground-textarea-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-textarea-color"><span><strong>color</strong><small>string</small></span><select id="playground-textarea-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-textarea-label"><span><strong>label</strong><small>string</small></span><input id="playground-textarea-label" name="pg_label" type="text" value="Textarea" /></label><label class="playground-field" for="playground-textarea-name"><span><strong>name</strong><small>string</small></span><input id="playground-textarea-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-textarea-value"><span><strong>value</strong><small>string</small></span><input id="playground-textarea-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-textarea-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-textarea-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-textarea-rows"><span><strong>rows</strong><small>number</small></span><input id="playground-textarea-rows" name="pg_rows" type="number" value="5" /></label><label class="playground-toggle" for="playground-textarea-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-textarea-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-textarea-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-textarea-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-class"><span><strong>class</strong><small>string</small></span><input id="playground-textarea-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-textarea-size"><span><strong>size</strong><small>string</small></span><select id="playground-textarea-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-textarea-color"><span><strong>color</strong><small>string</small></span><select id="playground-textarea-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-textarea-id"><span><strong>id</strong><small>string</small></span><input id="playground-textarea-id" name="pg_id" type="text" value="textarea-1" /></label><label class="playground-field" for="playground-textarea-name"><span><strong>name</strong><small>string</small></span><input id="playground-textarea-name" name="pg_name" type="text" value="textareaField" /></label><label class="playground-field" for="playground-textarea-label"><span><strong>label</strong><small>string</small></span><input id="playground-textarea-label" name="pg_label" type="text" value="Description" /></label><label class="playground-toggle" for="playground-textarea-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-textarea-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-textarea-placeholder" name="pg_placeholder" type="text" value="Enter textarea" /></label><label class="playground-field" for="playground-textarea-value"><span><strong>value</strong><small>string</small></span><input id="playground-textarea-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-textarea-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-textarea-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="floating">floating</option></select></label><label class="playground-field" for="playground-textarea-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-textarea-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-textarea-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-textarea-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-textarea-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-textarea-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-textarea-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-textarea-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-textarea-error"><span><strong>error</strong><small>string</small></span><input id="playground-textarea-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-textarea-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-textarea-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-rows"><span><strong>rows</strong><small>number</small></span><input id="playground-textarea-rows" name="pg_rows" type="number" value="4" /></label><label class="playground-field" for="playground-textarea-resize"><span><strong>resize</strong><small>string</small></span><input id="playground-textarea-resize" name="pg_resize" type="text" value="vertical" /></label><label class="playground-toggle" for="playground-textarea-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-textarea-readonly" name="pg_readonly" type="checkboLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -54,70 +71,226 @@ page TextareaDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="textarea-demo-1" class="demo-canvas demo-canvas--1">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Textarea" size="default" label="Textarea" value="sample-1" placeholder="Enter a sample value" rows="5" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="Textarea" size="default" color="primary" id="textarea-1" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Textarea
|
<pre><code><Textarea
|
||||||
value="sample-1"
|
id="textarea-1"
|
||||||
placeholder="Enter a sample value"
|
name="textareaField"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter textarea"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
|
rows="4"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="textarea-demo-2" class="demo-canvas demo-canvas--2">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Textarea" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" rows="5" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="Textarea" size="default" color="primary" id="textarea-2" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Textarea
|
<pre><code><Textarea
|
||||||
size="sm"
|
id="textarea-2"
|
||||||
label="Compact example"
|
name="textareaField"
|
||||||
value="sample-2"
|
label="Description"
|
||||||
placeholder="Enter a sample value"
|
placeholder="Enter textarea"
|
||||||
|
variant="outlined"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
rows="4"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="textarea-demo-3" class="demo-canvas demo-canvas--3">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="Textarea" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" rows="5" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="Textarea" size="default" color="primary" id="textarea-3" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><Textarea
|
<pre><code><Textarea
|
||||||
size="lg"
|
id="textarea-3"
|
||||||
label="Advanced example"
|
name="textareaField"
|
||||||
value="sample-3"
|
label="Description"
|
||||||
placeholder="Search by name, email, or identifier"
|
placeholder="Enter textarea"
|
||||||
|
variant="floating"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
iconPosition="end"
|
||||||
|
rows="4"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="textarea-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"><div data-component="Textarea" size="sm" color="primary" id="textarea-4" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="pill" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Textarea
|
||||||
|
size="sm"
|
||||||
|
id="textarea-4"
|
||||||
|
name="textareaField"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter textarea"
|
||||||
|
variant="pill"
|
||||||
|
rows="4"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="textarea-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"><div data-component="Textarea" size="default" color="primary" id="textarea-5" name="textareaField" label="Description" placeholder="Enter textarea" value="This content is read only." variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Textarea
|
||||||
|
id="textarea-5"
|
||||||
|
name="textareaField"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter textarea"
|
||||||
|
value="This content is read only."
|
||||||
|
rows="4"
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="textarea-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"><div data-component="Textarea" size="default" color="primary" id="textarea-6" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="true" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Textarea
|
||||||
|
id="textarea-6"
|
||||||
|
name="textareaField"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter textarea"
|
||||||
|
rows="4"
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="textarea-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"><div data-component="Textarea" size="default" color="primary" id="textarea-7" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="We'll never share your details." cornerHint="" error="" inline="true" rows="4" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Textarea
|
||||||
|
id="textarea-7"
|
||||||
|
name="textareaField"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter textarea"
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
rows="4"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="textarea-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"><div data-component="Textarea" size="default" color="primary" id="textarea-8" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Textarea
|
||||||
|
id="textarea-8"
|
||||||
|
name="textareaField"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter textarea"
|
||||||
|
cornerHint="Optional"
|
||||||
|
rows="4"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="textarea-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Textarea" size="default" color="primary" id="textarea-9" name="validatedField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><Textarea
|
||||||
|
id="textarea-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Description"
|
||||||
|
placeholder="Enter textarea"
|
||||||
|
rows="4"
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Textarea"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rows</code></td><td>number</td><td><code>5</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>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>"Textarea"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>rows</code></td><td>number</td><td><code>5</code></td><td>No</td></tr><tr><td><code>resize</code></td><td>string</td><td><code>"vertical"</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>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#textarea-demo-1">Production default</a><a href="#textarea-demo-2">Compact application</a><a href="#textarea-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#textarea-demo-1">Default field</a><a href="#textarea-demo-2">Outlined with start icon</a><a href="#textarea-demo-3">Floating label</a><a href="#textarea-demo-4">Pill and compact size</a><a href="#textarea-demo-5">Read only</a><a href="#textarea-demo-6">Disabled</a><a href="#textarea-demo-7">Inline helper text</a><a href="#textarea-demo-8">Field with corner hint</a><a href="#textarea-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,17 +3,30 @@ page TimePickerDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Time Picker"
|
state playground_id = ctx.url.searchParams.get("pg_id") ?? "time-picker-1"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "time-pickerField"
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Start time"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "time"
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter time picker"
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal"
|
||||||
|
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||||
|
state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
|
||||||
|
state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
|
||||||
|
state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? ""
|
||||||
|
state playground_error = ctx.url.searchParams.get("pg_error") ?? ""
|
||||||
|
state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false"
|
||||||
|
state playground_min = ctx.url.searchParams.get("pg_min") ?? "08:00"
|
||||||
|
state playground_max = ctx.url.searchParams.get("pg_max") ?? "18:00"
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
||||||
|
state playground_format = ctx.url.searchParams.get("pg_format") ?? "24"
|
||||||
|
state playground_minuteStep = ctx.url.searchParams.get("pg_minuteStep") ?? "5"
|
||||||
|
state playground_hours = ctx.url.searchParams.get("pg_hours") ?? ""
|
||||||
|
state playground_minutes = ctx.url.searchParams.get("pg_minutes") ?? ""
|
||||||
|
state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
seo {
|
seo {
|
||||||
title = "Time Picker"
|
title = "Time Picker"
|
||||||
description = "Theme-aware, responsive time picker component."
|
description = "Theme-aware, responsive time picker component."
|
||||||
@@ -27,7 +40,7 @@ page TimePickerDetail {
|
|||||||
<span class="showcase-eyebrow">Forms component</span>
|
<span class="showcase-eyebrow">Forms component</span>
|
||||||
<h1>Time Picker</h1>
|
<h1>Time Picker</h1>
|
||||||
<p>Theme-aware, responsive time picker component.</p>
|
<p>Theme-aware, responsive time picker component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>26 props</span><span>0 slots</span><span>7 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,19 +49,25 @@ page TimePickerDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="TimePicker" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="TimePicker" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" value="{playground_value}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" min="{playground_min}" max="{playground_max}" step="{playground_step}" format="{playground_format}" minuteStep="{playground_minuteStep}" hours="{playground_hours}" minutes="{playground_minutes}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><TimePicker
|
<pre><code data-playground-code><TimePicker
|
||||||
value="sample-1"
|
id="time-picker-1"
|
||||||
placeholder="Enter a sample value"
|
name="time-pickerField"
|
||||||
|
label="Start time"
|
||||||
|
placeholder="Enter time picker"
|
||||||
|
iconPosition="start"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-time-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-time-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-time-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-time-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-time-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-time-picker-label" name="pg_label" type="text" value="Time Picker" /></label><label class="playground-field" for="playground-time-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-time-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-time-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-time-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-time-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-time-picker-type"><span><strong>type</strong><small>string</small></span><input id="playground-time-picker-type" name="pg_type" type="text" value="time" /></label><label class="playground-field" for="playground-time-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-time-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-time-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-time-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-time-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-time-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-time-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-time-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-time-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-time-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-time-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-time-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-time-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-time-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-time-picker-id" name="pg_id" type="text" value="time-picker-1" /></label><label class="playground-field" for="playground-time-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-time-picker-name" name="pg_name" type="text" value="time-pickerField" /></label><label class="playground-field" for="playground-time-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-time-picker-label" name="pg_label" type="text" value="Start time" /></label><label class="playground-toggle" for="playground-time-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-time-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-time-picker-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-time-picker-placeholder" name="pg_placeholder" type="text" value="Enter time picker" /></label><label class="playground-field" for="playground-time-picker-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-time-picker-variant" name="pg_variant"><option value="normal" selected>normal</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="floating">floating</option></select></label><label class="playground-field" for="playground-time-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-time-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-time-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-time-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-time-picker-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-time-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-time-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-time-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-time-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-time-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-time-picker-min" name="pg_min" type="text" value="08:00" /></label><label class="playground-field" for="playground-time-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-time-picker-max" name="pg_max" type="text" value="18:00" /></label><label class="playground-field" for="playground-time-picker-step"><span><strong>step</strong><small>string</Line truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,70 +76,242 @@ page TimePickerDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default field</h2><p>Use a labelled field with a value, placeholder, and supporting helper text.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="time-picker-demo-1" class="demo-canvas demo-canvas--1">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="TimePicker" size="default" label="Time Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="TimePicker" size="default" color="primary" id="time-picker-1" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Default field usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><TimePicker
|
<pre><code><TimePicker
|
||||||
value="sample-1"
|
id="time-picker-1"
|
||||||
placeholder="Enter a sample value"
|
name="time-pickerField"
|
||||||
|
label="Start time"
|
||||||
|
placeholder="Enter time picker"
|
||||||
|
iconPosition="start"
|
||||||
|
helperText="Helpful context for this field."
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Outlined with start icon</h2><p>Combine an outlined treatment with a leading icon.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="time-picker-demo-2" class="demo-canvas demo-canvas--2">
|
<div id="time-picker-demo-2" class="demo-canvas demo-canvas--2">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="TimePicker" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="TimePicker" size="default" color="primary" id="time-picker-2" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Outlined with start icon usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><TimePicker
|
<pre><code><TimePicker
|
||||||
size="sm"
|
id="time-picker-2"
|
||||||
label="Compact example"
|
name="time-pickerField"
|
||||||
value="sample-2"
|
label="Start time"
|
||||||
placeholder="Enter a sample value"
|
placeholder="Enter time picker"
|
||||||
|
variant="outlined"
|
||||||
|
icon="icon-[lucide--sparkles]"
|
||||||
|
iconPosition="start"
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Floating label</h2><p>Move the label into the control while preserving an accessible field name.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="time-picker-demo-3" class="demo-canvas demo-canvas--3">
|
<div id="time-picker-demo-3" class="demo-canvas demo-canvas--3">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="TimePicker" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="TimePicker" size="default" color="primary" id="time-picker-3" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Floating label usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><TimePicker
|
<pre><code><TimePicker
|
||||||
size="lg"
|
id="time-picker-3"
|
||||||
label="Advanced example"
|
name="time-pickerField"
|
||||||
value="sample-3"
|
label="Start time"
|
||||||
placeholder="Search by name, email, or identifier"
|
placeholder="Enter time picker"
|
||||||
|
variant="floating"
|
||||||
|
icon="icon-[lucide--circle-user-round]"
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Appearance</span><h2>Pill and compact size</h2><p>Use pill styling and compact sizing in dense interfaces.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="time-picker-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"><div data-component="TimePicker" size="sm" color="primary" id="time-picker-4" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="pill" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Pill and compact size usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><TimePicker
|
||||||
|
size="sm"
|
||||||
|
id="time-picker-4"
|
||||||
|
name="time-pickerField"
|
||||||
|
label="Start time"
|
||||||
|
placeholder="Enter time picker"
|
||||||
|
variant="pill"
|
||||||
|
iconPosition="start"
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Read only</h2><p>Display a submitted value without allowing it to be changed.</p></div>
|
||||||
|
<span class="demo-case-number">05</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="time-picker-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"><div data-component="TimePicker" size="default" color="primary" id="time-picker-5" name="time-pickerField" label="Start time" value="09:30" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="true" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Read only usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><TimePicker
|
||||||
|
id="time-picker-5"
|
||||||
|
name="time-pickerField"
|
||||||
|
label="Start time"
|
||||||
|
value="09:30"
|
||||||
|
placeholder="Enter time picker"
|
||||||
|
iconPosition="start"
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
|
readonly="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled</h2><p>Prevent interaction and communicate that the field is unavailable.</p></div>
|
||||||
|
<span class="demo-case-number">06</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="time-picker-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"><div data-component="TimePicker" size="default" color="primary" id="time-picker-6" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="true" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><TimePicker
|
||||||
|
id="time-picker-6"
|
||||||
|
name="time-pickerField"
|
||||||
|
label="Start time"
|
||||||
|
placeholder="Enter time picker"
|
||||||
|
iconPosition="start"
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
|
disabled="true"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Inline helper text</h2><p>Place the label, control, and supporting text on one responsive line.</p></div>
|
||||||
|
<span class="demo-case-number">07</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="time-picker-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"><div data-component="TimePicker" size="default" color="primary" id="time-picker-7" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="We'll never share your details." cornerHint="" error="" inline="true" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Inline helper text usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><TimePicker
|
||||||
|
id="time-picker-7"
|
||||||
|
name="time-pickerField"
|
||||||
|
label="Start time"
|
||||||
|
placeholder="Enter time picker"
|
||||||
|
iconPosition="start"
|
||||||
|
helperText="We'll never share your details."
|
||||||
|
inline="true"
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Layout</span><h2>Field with corner hint</h2><p>Place optional context opposite the label and keep the control on the next line.</p></div>
|
||||||
|
<span class="demo-case-number">08</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="time-picker-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"><div data-component="TimePicker" size="default" color="primary" id="time-picker-8" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Field with corner hint usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><TimePicker
|
||||||
|
id="time-picker-8"
|
||||||
|
name="time-pickerField"
|
||||||
|
label="Start time"
|
||||||
|
placeholder="Enter time picker"
|
||||||
|
iconPosition="start"
|
||||||
|
cornerHint="Optional"
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">Validation</span><h2>Validated field</h2><p>Surface validation through @wrnexus/validation-compatible error targets and accessible state.</p></div>
|
||||||
|
<span class="demo-case-number">09</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="time-picker-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="TimePicker" size="default" color="primary" id="time-picker-9" name="validatedField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="true"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Validated field usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><TimePicker
|
||||||
|
id="time-picker-9"
|
||||||
|
name="validatedField"
|
||||||
|
label="Start time"
|
||||||
|
placeholder="Enter time picker"
|
||||||
|
iconPosition="start"
|
||||||
|
min="08:00"
|
||||||
|
max="18:00"
|
||||||
|
required="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@invalid</code><span>Fires when the component emits the invalid event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<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>"Time Picker"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"time"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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>"Time"</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>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>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>"icon-[lucide--clock-3]"</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"end"</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>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>format</code></td><td>string</td><td><code>"24"</code></td><td>No</td></tr><tr><td><code>minuteStep</code></td><td>number</td><td><code>5</code></td><td>No</td></tr><tr><td><code>hours</code></td><td>string</td><td><code>["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]</code></td><td>No</td></tr><tr><td><code>minutes</code></td><td>string</td><td><code>["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#time-picker-demo-1">Production default</a><a href="#time-picker-demo-2">Compact application</a><a href="#time-picker-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#time-picker-demo-1">Default field</a><a href="#time-picker-demo-2">Outlined with start icon</a><a href="#time-picker-demo-3">Floating label</a><a href="#time-picker-demo-4">Pill and compact size</a><a href="#time-picker-demo-5">Read only</a><a href="#time-picker-demo-6">Disabled</a><a href="#time-picker-demo-7">Inline helper text</a><a href="#time-picker-demo-8">Field with corner hint</a><a href="#time-picker-demo-9">Validated field</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page TimelineDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Timeline</h1>
|
<h1>Timeline</h1>
|
||||||
<p>Theme-aware, responsive timeline component.</p>
|
<p>Theme-aware, responsive timeline component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>1 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page TimelineDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-timeline-size"><span><strong>size</strong><small>string</small></span><select id="playground-timeline-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-timeline-color"><span><strong>color</strong><small>string</small></span><select id="playground-timeline-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-timeline-title"><span><strong>title</strong><small>string</small></span><input id="playground-timeline-title" name="pg_title" type="text" value="Timeline example" /></label><label class="playground-field" for="playground-timeline-description"><span><strong>description</strong><small>string</small></span><input id="playground-timeline-description" name="pg_description" type="text" value="A polished default timeline for a modern application." /></label><label class="playground-field" for="playground-timeline-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-timeline-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-timeline-size"><span><strong>size</strong><small>string</small></span><select id="playground-timeline-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-timeline-color"><span><strong>color</strong><small>string</small></span><select id="playground-timeline-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-timeline-title"><span><strong>title</strong><small>string</small></span><input id="playground-timeline-title" name="pg_title" type="text" value="Timeline example" /></label><label class="playground-field" for="playground-timeline-description"><span><strong>description</strong><small>string</small></span><input id="playground-timeline-description" name="pg_description" type="text" value="A polished default timeline for a modern application." /></label><label class="playground-field" for="playground-timeline-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-timeline-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "timeline-0-1",
|
"id": "timeline-0-1",
|
||||||
"key": "timeline-0-1",
|
"key": "timeline-0-1",
|
||||||
@@ -649,11 +649,15 @@ page TimelineDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('select', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Timeline"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Timeline"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#timeline-demo-1">Production default</a><a href="#timeline-demo-2">Compact application</a><a href="#timeline-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#timeline-demo-1">Production default</a><a href="#timeline-demo-2">Compact application</a><a href="#timeline-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page ToastNotificationsDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Toast Notifications</h1>
|
<h1>Toast Notifications</h1>
|
||||||
<p>Theme-aware, responsive toast notifications component.</p>
|
<p>Theme-aware, responsive toast notifications component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page ToastNotificationsDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-toast-notifications-size"><span><strong>size</strong><small>string</small></span><select id="playground-toast-notifications-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-toast-notifications-color"><span><strong>color</strong><small>string</small></span><select id="playground-toast-notifications-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-toast-notifications-title"><span><strong>title</strong><small>string</small></span><input id="playground-toast-notifications-title" name="pg_title" type="text" value="Toast Notifications example" /></label><label class="playground-field" for="playground-toast-notifications-description"><span><strong>description</strong><small>string</small></span><input id="playground-toast-notifications-description" name="pg_description" type="text" value="A polished default toast notifications for a modern application." /></label><label class="playground-field" for="playground-toast-notifications-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-toast-notifications-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-toast-notifications-size"><span><strong>size</strong><small>string</small></span><select id="playground-toast-notifications-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-toast-notifications-color"><span><strong>color</strong><small>string</small></span><select id="playground-toast-notifications-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-toast-notifications-title"><span><strong>title</strong><small>string</small></span><input id="playground-toast-notifications-title" name="pg_title" type="text" value="Toast Notifications example" /></label><label class="playground-field" for="playground-toast-notifications-description"><span><strong>description</strong><small>string</small></span><input id="playground-toast-notifications-description" name="pg_description" type="text" value="A polished default toast notifications for a modern application." /></label><label class="playground-field" for="playground-toast-notifications-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-toast-notifications-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "toast-notifications-0-1",
|
"id": "toast-notifications-0-1",
|
||||||
"key": "toast-notifications-0-1",
|
"key": "toast-notifications-0-1",
|
||||||
@@ -649,11 +649,15 @@ page ToastNotificationsDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@add</code><span>Fires when an item is added.</span></div><div><code>@dismiss</code><span>Fires when the component emits the dismiss event.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@action</code><span>Fires when the component's action is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('add', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Toast Notifications"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Toast Notifications"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#toast-notifications-demo-1">Production default</a><a href="#toast-notifications-demo-2">Compact application</a><a href="#toast-notifications-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#toast-notifications-demo-1">Production default</a><a href="#toast-notifications-demo-2">Compact application</a><a href="#toast-notifications-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page ToastDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Toast</h1>
|
<h1>Toast</h1>
|
||||||
<p>Theme-aware, responsive toast component.</p>
|
<p>Theme-aware, responsive toast component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page ToastDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-toast-size"><span><strong>size</strong><small>string</small></span><select id="playground-toast-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-toast-color"><span><strong>color</strong><small>string</small></span><select id="playground-toast-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-toast-title"><span><strong>title</strong><small>string</small></span><input id="playground-toast-title" name="pg_title" type="text" value="Toast example" /></label><label class="playground-field" for="playground-toast-description"><span><strong>description</strong><small>string</small></span><input id="playground-toast-description" name="pg_description" type="text" value="A polished default toast for a modern application." /></label><label class="playground-field" for="playground-toast-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-toast-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-toast-size"><span><strong>size</strong><small>string</small></span><select id="playground-toast-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-toast-color"><span><strong>color</strong><small>string</small></span><select id="playground-toast-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-toast-title"><span><strong>title</strong><small>string</small></span><input id="playground-toast-title" name="pg_title" type="text" value="Toast example" /></label><label class="playground-field" for="playground-toast-description"><span><strong>description</strong><small>string</small></span><input id="playground-toast-description" name="pg_description" type="text" value="A polished default toast for a modern application." /></label><label class="playground-field" for="playground-toast-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-toast-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "toast-0-1",
|
"id": "toast-0-1",
|
||||||
"key": "toast-0-1",
|
"key": "toast-0-1",
|
||||||
@@ -649,11 +649,15 @@ page ToastDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dismiss</code><span>Fires when the component emits the dismiss event.</span></div><div><code>@action</code><span>Fires when the component's action is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('dismiss', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Toast"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Toast"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#toast-demo-1">Production default</a><a href="#toast-demo-2">Compact application</a><a href="#toast-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#toast-demo-1">Production default</a><a href="#toast-demo-2">Compact application</a><a href="#toast-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -3,17 +3,27 @@ page ToggleCountDetail {
|
|||||||
layout = "showcase"
|
layout = "showcase"
|
||||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Toggle Count"
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "segmented"
|
||||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
||||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? "pricing-cycle"
|
||||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
|
state playground_value = ctx.url.searchParams.get("pg_value") ?? "annual"
|
||||||
state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
|
state playground_firstValue = ctx.url.searchParams.get("pg_firstValue") ?? "monthly"
|
||||||
state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
|
state playground_firstLabel = ctx.url.searchParams.get("pg_firstLabel") ?? "Monthly"
|
||||||
state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
|
state playground_secondValue = ctx.url.searchParams.get("pg_secondValue") ?? "annual"
|
||||||
state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
|
state playground_secondLabel = ctx.url.searchParams.get("pg_secondLabel") ?? "Annual"
|
||||||
|
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Billing frequency"
|
||||||
|
state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"label\": \"Startup\",\n \"monthly\": 19,\n \"annual\": 190\n },\n {\n \"label\": \"Team\",\n \"monthly\": 89,\n \"annual\": 890\n },\n {\n \"label\": \"Enterprise\",\n \"monthly\": 129,\n \"annual\": 1290\n }\n]"
|
||||||
|
state playground_currency = ctx.url.searchParams.get("pg_currency") ?? "$"
|
||||||
|
state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? ""
|
||||||
|
state playground_firstValueKey = ctx.url.searchParams.get("pg_firstValueKey") ?? "monthly"
|
||||||
|
state playground_secondValueKey = ctx.url.searchParams.get("pg_secondValueKey") ?? "annual"
|
||||||
|
state playground_emptyValue = ctx.url.searchParams.get("pg_emptyValue") ?? "—"
|
||||||
|
state playground_align = ctx.url.searchParams.get("pg_align") ?? "end"
|
||||||
|
state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "true"
|
||||||
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
|
||||||
state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
|
state playground_animate = ctx.url.searchParams.get("pg_animate") ?? "true"
|
||||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
state playground_animationDuration = ctx.url.searchParams.get("pg_animationDuration") ?? "450"
|
||||||
|
state playground_animationSteps = ctx.url.searchParams.get("pg_animationSteps") ?? "18"
|
||||||
seo {
|
seo {
|
||||||
title = "Toggle Count"
|
title = "Toggle Count"
|
||||||
description = "Theme-aware, responsive toggle count component."
|
description = "Theme-aware, responsive toggle count component."
|
||||||
@@ -27,7 +37,7 @@ page ToggleCountDetail {
|
|||||||
<span class="showcase-eyebrow">Advanced Forms component</span>
|
<span class="showcase-eyebrow">Advanced Forms component</span>
|
||||||
<h1>Toggle Count</h1>
|
<h1>Toggle Count</h1>
|
||||||
<p>Theme-aware, responsive toggle count component.</p>
|
<p>Theme-aware, responsive toggle count component.</p>
|
||||||
<div class="detail-badges"><span>13 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>23 props</span><span>0 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -36,19 +46,52 @@ page ToggleCountDetail {
|
|||||||
<div class="playground-workbench">
|
<div class="playground-workbench">
|
||||||
<div class="playground-preview">
|
<div class="playground-preview">
|
||||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="playground-preview-source" data-playground-preview><div data-component="ToggleCount" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
|
<div class="playground-preview-source" data-playground-preview><div data-component="ToggleCount" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}" name="{playground_name}" value="{playground_value}" firstValue="{playground_firstValue}" firstLabel="{playground_firstLabel}" secondValue="{playground_secondValue}" secondLabel="{playground_secondLabel}" ariaLabel="{playground_ariaLabel}" items="{playground_items}" currency="{playground_currency}" suffix="{playground_suffix}" firstValueKey="{playground_firstValueKey}" secondValueKey="{playground_secondValueKey}" emptyValue="{playground_emptyValue}" align="{playground_align}" fullWidth="{playground_fullWidth}" disabled="{playground_disabled}" animate="{playground_animate}" animationDuration="{playground_animationDuration}" animationSteps="{playground_animationSteps}"></div></div>
|
||||||
<section class="playground-code" aria-label="Current component code">
|
<section class="playground-code" aria-label="Current component code">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||||
<pre><code data-playground-code><ToggleCount
|
<pre><code data-playground-code><ToggleCount
|
||||||
value="sample-1"
|
name="pricing-cycle"
|
||||||
placeholder="Enter a sample value"
|
value="annual"
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"label": "Startup",
|
||||||
|
"monthly": 19,
|
||||||
|
"annual": 190
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Team",
|
||||||
|
"monthly": 89,
|
||||||
|
"annual": 890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"monthly": 129,
|
||||||
|
"annual": 1290
|
||||||
|
}
|
||||||
|
]'
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>23 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-toggle-count-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-count-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-toggle-count-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-label"><span><strong>label</strong><small>string</small></span><input id="playground-toggle-count-label" name="pg_label" type="text" value="Toggle Count" /></label><label class="playground-field" for="playground-toggle-count-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-count-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-count-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-toggle-count-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-toggle-count-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-toggle-count-type"><span><strong>type</strong><small>string</small></span><input id="playground-toggle-count-type" name="pg_type" type="text" value="text" /></label><label class="playground-field" for="playground-toggle-count-min"><span><strong>min</strong><small>string</small></span><input id="playground-toggle-count-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-max"><span><strong>max</strong><small>string</small></span><input id="playground-toggle-count-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-step"><span><strong>step</strong><small>string</small></span><input id="playground-toggle-count-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-toggle-count-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-toggle-count-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-toggle-count-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-count-class"><span><strong>class</strong><small>string</small></span><input id="playground-toggle-count-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-toggle-count-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-toggle-count-variant" name="pg_variant"><option value="segmented" selected>segmented</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="switch">switch</option></select></label><label class="playground-field" for="playground-toggle-count-class"><span><strong>class</strong><small>string</small></span><input id="playground-toggle-count-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-count-name" name="pg_name" type="text" value="pricing-cycle" /></label><label class="playground-field" for="playground-toggle-count-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-count-value" name="pg_value" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-firstValue"><span><strong>first Value</strong><small>string</small></span><input id="playground-toggle-count-firstValue" name="pg_firstValue" type="text" value="monthly" /></label><label class="playground-field" for="playground-toggle-count-firstLabel"><span><strong>first Label</strong><small>string</small></span><input id="playground-toggle-count-firstLabel" name="pg_firstLabel" type="text" value="Monthly" /></label><label class="playground-field" for="playground-toggle-count-secondValue"><span><strong>second Value</strong><small>string</small></span><input id="playground-toggle-count-secondValue" name="pg_secondValue" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-secondLabel"><span><strong>second Label</strong><small>string</small></span><input id="playground-toggle-count-secondLabel" name="pg_secondLabel" type="text" value="Annual" /></label><label class="playground-field" for="playground-toggle-count-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-toggle-count-ariaLabel" name="pg_ariaLabel" type="text" value="Billing frequency" /></label><label class="playground-field" for="playground-toggle-count-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-toggle-count-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
|
{
|
||||||
|
"label": "Startup",
|
||||||
|
"monthly": 19,
|
||||||
|
"annual": 190
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Team",
|
||||||
|
"monthly": 89,
|
||||||
|
"annual": 890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"monthly": 129,
|
||||||
|
"annual": 1290
|
||||||
|
}
|
||||||
|
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-toggle-count-currency"><span><strong>currency</strong><small>string</small></span><input id="playground-toggle-count-currency" name="pg_currency" type="text" value="$" /></label><label class="playground-field" for="playground-toggle-count-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-toggle-count-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-firstValueKey"><span><strong>first Value Key</strong><small>string</small></span><input id="playground-toggle-count-firstValueKey" name="pg_firstValueKey" type="text" value="monthly" /></label><label class="playground-field" for="playground-toggle-count-secondValueKey"><span><strong>second Value Key</strong><small>string</small></span><input id="playground-toggle-count-secondValueKey" name="pg_secondValueKey" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-emptyValue"><span><strong>empty Value</strong><small>string</small></span><input id="playground-toggle-count-emptyValue" name="pg_emptyValue" type="text" value="—" /></label><label class="playground-field" for="playground-toggle-count-align"><span><strong>align</strong><small>string</small></span><select id="playground-toggle-count-align" name="pg_align"><option value="end" selected>end</option><option value="start">start</option><option value="center">center</option></select></label><label class="playground-toggle" for="playground-toggle-count-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-toggle-count-fullWidth" name="pg_fullWidth" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-toggle-count-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-animate"><span><strong>animate</strong><small>boolean</small></span><input id="playground-toggle-count-animate" name="pg_animate" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-count-animationDuration"><span><strong>animation Duration</strong><small>number</small></span><input id="playground-toggle-count-animationDuration" name="pg_animationDuration" type="number" value="450" /></label><label class="playground-field" for="playground-toggle-count-animationSteps"><span><strong>animation Steps</strong><small>number</small></span><input id="playground-toggle-count-animationSteps" name="pg_animationSteps" type="number" value="18" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -57,70 +100,164 @@ page ToggleCountDetail {
|
|||||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
<div><span class="demo-case-eyebrow">Pricing</span><h2>Monthly and annual pricing</h2><p>Compare plan prices with an aligned segmented control and clear selected state.</p></div>
|
||||||
<span class="demo-case-number">01</span>
|
<span class="demo-case-number">01</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="toggle-count-demo-1" class="demo-canvas demo-canvas--1">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ToggleCount" size="default" label="Toggle Count" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="demo-render"><div data-component="ToggleCount" size="default" color="primary" variant="segmented" name="pricing-cycle" value="annual" items="[{"label":"Startup","monthly":19,"annual":190},{"label":"Team","monthly":89,"annual":890},{"label":"Enterprise","monthly":129,"annual":1290}]" align="end"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Production default usage">
|
<section class="demo-code" aria-label="Monthly and annual pricing usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ToggleCount
|
<pre><code><ToggleCount
|
||||||
value="sample-1"
|
name="pricing-cycle"
|
||||||
placeholder="Enter a sample value"
|
value="annual"
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"label": "Startup",
|
||||||
|
"monthly": 19,
|
||||||
|
"annual": 190
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Team",
|
||||||
|
"monthly": 89,
|
||||||
|
"annual": 890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"monthly": 129,
|
||||||
|
"annual": 1290
|
||||||
|
}
|
||||||
|
]'
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
<div><span class="demo-case-eyebrow">Pricing</span><h2>Switch control</h2><p>Use a compact switch between labels while updating every displayed plan value.</p></div>
|
||||||
<span class="demo-case-number">02</span>
|
<span class="demo-case-number">02</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="toggle-count-demo-2" class="demo-canvas demo-canvas--2">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ToggleCount" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
|
<div class="demo-render"><div data-component="ToggleCount" size="default" color="primary" variant="switch" name="pricing-switch" value="monthly" items="[{"label":"Startup","monthly":19,"annual":190},{"label":"Team","monthly":89,"annual":890},{"label":"Enterprise","monthly":129,"annual":1290}]" align="center"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Compact application usage">
|
<section class="demo-code" aria-label="Switch control usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ToggleCount
|
<pre><code><ToggleCount
|
||||||
size="sm"
|
variant="switch"
|
||||||
label="Compact example"
|
name="pricing-switch"
|
||||||
value="sample-2"
|
items='[
|
||||||
placeholder="Enter a sample value"
|
{
|
||||||
|
"label": "Startup",
|
||||||
|
"monthly": 19,
|
||||||
|
"annual": 190
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Team",
|
||||||
|
"monthly": 89,
|
||||||
|
"annual": 890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"monthly": 129,
|
||||||
|
"annual": 1290
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
align="center"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="demo-case">
|
<article class="demo-case">
|
||||||
<header class="demo-case-header">
|
<header class="demo-case-header">
|
||||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
<div><span class="demo-case-eyebrow">Configuration</span><h2>Custom billing periods</h2><p>Configure custom values, labels, currency, suffixes, and plan descriptions.</p></div>
|
||||||
<span class="demo-case-number">03</span>
|
<span class="demo-case-number">03</span>
|
||||||
</header>
|
</header>
|
||||||
<div class="demo-workbench">
|
<div class="demo-workbench">
|
||||||
<div id="toggle-count-demo-3" class="demo-canvas demo-canvas--3">
|
<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-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||||
<div class="demo-render"><div data-component="ToggleCount" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
|
<div class="demo-render"><div data-component="ToggleCount" size="default" color="primary" name="contract-length" value="quarterly" firstValue="quarterly" firstLabel="Quarterly" secondValue="yearly" secondLabel="Yearly" items="[{"label":"Core","description":"For small product teams","quarterly":29,"yearly":22},{"label":"Scale","description":"For growing organizations","quarterly":79,"yearly":62}]" currency="€" suffix="/seat" firstValueKey="quarterly" secondValueKey="yearly"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<section class="demo-code" aria-label="Rich configuration usage">
|
<section class="demo-code" aria-label="Custom billing periods usage">
|
||||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
<pre><code><ToggleCount
|
<pre><code><ToggleCount
|
||||||
size="lg"
|
name="contract-length"
|
||||||
label="Advanced example"
|
value="quarterly"
|
||||||
value="sample-3"
|
firstValue="quarterly"
|
||||||
placeholder="Search by name, email, or identifier"
|
firstLabel="Quarterly"
|
||||||
|
secondValue="yearly"
|
||||||
|
secondLabel="Yearly"
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"label": "Core",
|
||||||
|
"description": "For small product teams",
|
||||||
|
"quarterly": 29,
|
||||||
|
"yearly": 22
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Scale",
|
||||||
|
"description": "For growing organizations",
|
||||||
|
"quarterly": 79,
|
||||||
|
"yearly": 62
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
currency="€"
|
||||||
|
suffix="/seat"
|
||||||
|
firstValueKey="quarterly"
|
||||||
|
secondValueKey="yearly"
|
||||||
|
/></code></pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="demo-case">
|
||||||
|
<header class="demo-case-header">
|
||||||
|
<div><span class="demo-case-eyebrow">States</span><h2>Disabled pricing toggle</h2><p>Keep the current comparison visible while preventing billing-period changes.</p></div>
|
||||||
|
<span class="demo-case-number">04</span>
|
||||||
|
</header>
|
||||||
|
<div class="demo-workbench">
|
||||||
|
<div id="toggle-count-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"><div data-component="ToggleCount" size="default" color="primary" variant="segmented" name="disabled-pricing-cycle" value="annual" items="[{"label":"Startup","monthly":19,"annual":190},{"label":"Team","monthly":89,"annual":890},{"label":"Enterprise","monthly":129,"annual":1290}]" align="end" disabled="true"></div></div>
|
||||||
|
</div>
|
||||||
|
<section class="demo-code" aria-label="Disabled pricing toggle usage">
|
||||||
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||||
|
<pre><code><ToggleCount
|
||||||
|
name="disabled-pricing-cycle"
|
||||||
|
value="annual"
|
||||||
|
items='[
|
||||||
|
{
|
||||||
|
"label": "Startup",
|
||||||
|
"monthly": 19,
|
||||||
|
"annual": 190
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Team",
|
||||||
|
"monthly": 89,
|
||||||
|
"annual": 890
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Enterprise",
|
||||||
|
"monthly": 129,
|
||||||
|
"annual": 1290
|
||||||
|
}
|
||||||
|
]'
|
||||||
|
disabled="true"
|
||||||
/></code></pre>
|
/></code></pre>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
<section id="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>"Toggle Count"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
component.addEventListener('change', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"segmented"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"billing-cycle"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"monthly"</code></td><td>No</td></tr><tr><td><code>firstValue</code></td><td>string</td><td><code>"monthly"</code></td><td>No</td></tr><tr><td><code>firstLabel</code></td><td>string</td><td><code>"Monthly"</code></td><td>No</td></tr><tr><td><code>secondValue</code></td><td>string</td><td><code>"annual"</code></td><td>No</td></tr><tr><td><code>secondLabel</code></td><td>string</td><td><code>"Annual"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Billing frequency"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>currency</code></td><td>string</td><td><code>"$"</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>firstValueKey</code></td><td>string</td><td><code>"monthly"</code></td><td>No</td></tr><tr><td><code>secondValueKey</code></td><td>string</td><td><code>"annual"</code></td><td>No</td></tr><tr><td><code>emptyValue</code></td><td>string</td><td><code>"—"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"end"</code></td><td>No</td></tr><tr><td><code>fullWidth</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>animate</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>animationDuration</code></td><td>number</td><td><code>450</code></td><td>No</td></tr><tr><td><code>animationSteps</code></td><td>number</td><td><code>18</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#toggle-count-demo-1">Production default</a><a href="#toggle-count-demo-2">Compact application</a><a href="#toggle-count-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#toggle-count-demo-1">Monthly and annual pricing</a><a href="#toggle-count-demo-2">Switch control</a><a href="#toggle-count-demo-3">Custom billing periods</a><a href="#toggle-count-demo-4">Disabled pricing toggle</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ page TogglePasswordDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>24 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>24 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-toggle-password-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-password-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-toggle-password-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-password-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-toggle-password-label"><span><strong>label</strong><small>string</small></span><input id="playground-toggle-password-label" name="pg_label" type="text" value="Password" /></label><label class="playground-field" for="playground-toggle-password-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-password-name" name="pg_name" type="text" value="toggle-password-1" /></label><label class="playground-field" for="playground-toggle-password-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-password-value" name="pg_value" type="text" value="Northstar!2026" /></label><label class="playground-field" for="playground-toggle-password-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-toggle-password-placeholder" name="pg_placeholder" type="text" value="Enter your password" /></label><label class="playground-field" for="playground-toggle-password-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-toggle-password-autocomplete" name="pg_autocomplete" type="text" value="current-password" /></label><label class="playground-field" for="playground-toggle-password-minlength"><span><strong>minlength</strong><small>string</small></span><input id="playground-toggle-password-minlength" name="pg_minlength" type="text" value="" /></label><label class="playground-field" for="playground-toggle-password-maxlength"><span><strong>maxlength</strong><small>string</small></span><input id="playground-toggle-password-maxlength" name="pg_maxlength" type="text" value="128" /></label><label class="playground-field" for="playground-toggle-password-pattern"><span><strong>pattern</strong><small>string</small></span><input id="playground-toggle-password-pattern" name="pg_pattern" type="text" value="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" /></label><label class="playground-field" for="playground-toggle-password-fields"><span><strong>fields</strong><small>string</small></span><textarea id="playground-toggle-password-fields" name="pg_fields" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-toggle-password-visible"><span><strong>visible</strong><small>boolean</small></span><input id="playground-toggle-password-visible" name="pg_visible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-toggleable"><span><strong>toggleable</strong><small>boolean</small></span><input id="playground-toggle-password-toggleable" name="pg_toggleable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-password-toggleMode"><span><strong>toggle Mode</strong><small>string</small></span><select id="playground-toggle-password-toggleMode" name="pg_toggleMode"><option value="button" selected>button</option><option value="checkbox">checkbox</option></select></label><label class="playground-field" for="playground-toggle-password-checkboxLabel"><span><strong>checkbox Label</strong><small>string</small></span><input id="playground-toggle-password-checkboxLabel" name="pg_checkboxLabel" type="text" value="Show password" /></label><label class="playground-field" for="playground-toggle-password-showLabel"><span><strong>show Label</strong><small>string</small></span><input id="playground-toggle-password-showLabel" name="pg_showLabel" type="text" value="Show password" /></label><label class="playground-field" for="playground-toggle-password-hideLabel"><span><strong>hide Label</strong><small>string</small></span><input id="playground-toggle-password-hideLabel" name="pg_hideLabel" type="text" value="Hide password" /></label><label class="playground-toggle" for="playground-toggle-password-disabLine truncated
|
<div class="playground-fields"><label class="playground-field" for="playground-toggle-password-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-password-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-toggle-password-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-password-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-toggle-password-label"><span><strong>label</strong><small>string</small></span><input id="playground-toggle-password-label" name="pg_label" type="text" value="Password" /></label><label class="playground-field" for="playground-toggle-password-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-password-name" name="pg_name" type="text" value="toggle-password-1" /></label><label class="playground-field" for="playground-toggle-password-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-password-value" name="pg_value" type="text" value="Northstar!2026" /></label><label class="playground-field" for="playground-toggle-password-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-toggle-password-placeholder" name="pg_placeholder" type="text" value="Enter your password" /></label><label class="playground-field" for="playground-toggle-password-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-toggle-password-autocomplete" name="pg_autocomplete" type="text" value="current-password" /></label><label class="playground-field" for="playground-toggle-password-minlength"><span><strong>minlength</strong><small>string</small></span><input id="playground-toggle-password-minlength" name="pg_minlength" type="text" value="" /></label><label class="playground-field" for="playground-toggle-password-maxlength"><span><strong>maxlength</strong><small>string</small></span><input id="playground-toggle-password-maxlength" name="pg_maxlength" type="text" value="128" /></label><label class="playground-field" for="playground-toggle-password-pattern"><span><strong>pattern</strong><small>string</small></span><input id="playground-toggle-password-pattern" name="pg_pattern" type="text" value="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" /></label><label class="playground-field" for="playground-toggle-password-fields"><span><strong>fields</strong><small>string</small></span><textarea id="playground-toggle-password-fields" name="pg_fields" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-toggle-password-visible"><span><strong>visible</strong><small>boolean</small></span><input id="playground-toggle-password-visible" name="pg_visible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-toggleable"><span><strong>toggleable</strong><small>boolean</small></span><input id="playground-toggle-password-toggleable" name="pg_toggleable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-password-toggleMode"><span><strong>toggle Mode</strong><small>string</small></span><select id="playground-toggle-password-toggleMode" name="pg_toggleMode"><option value="button" selected>button</option><option value="checkbox">checkbox</option></select></label><label class="playground-field" for="playground-toggle-password-checkboxLabel"><span><strong>checkbox Label</strong><small>string</small></span><input id="playground-toggle-password-checkboxLabel" name="pg_checkboxLabel" type="text" value="Show password" /></label><label class="playground-field" for="playground-toggle-password-showLabel"><span><strong>show Label</strong><small>string</small></span><input id="playground-toggle-password-showLabel" name="pg_showLabel" type="text" value="Show password" /></label><label class="playground-field" for="playground-toggle-password-hideLabel"><span><strong>hide Label</strong><small>string</small></span><input id="playground-toggle-password-hideLabel" name="pg_hideLabel" type="text" value="Hide password" /></label><label claLine truncated
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -301,14 +301,9 @@ page TogglePasswordDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every interaction</h2><p>Events are declared with <code>@event</code>, bubble from the component root, and expose their state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires whenever the password value receives user input.</span></div><div><code>@change</code><span>Fires when the password field commits a changed value.</span></div><div><code>@toggle</code><span>Fires after password visibility changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-wrn-toggle-password]")
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
component.addEventListener("toggle", (event) => {
|
component.addEventListener('input', (event) => {
|
||||||
console.log(event.detail.value)
|
|
||||||
console.log(event.detail.complete)
|
|
||||||
})
|
|
||||||
|
|
||||||
component.addEventListener("input", (event) => {
|
|
||||||
console.log(event.detail)
|
console.log(event.detail)
|
||||||
})</code></pre></section></div></section>
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Password"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"password"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Enter your password"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"current-password"</code></td><td>No</td></tr><tr><td><code>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"</code></td><td>No</td></tr><tr><td><code>fields</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>visible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>toggleable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>toggleMode</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>checkboxLabel</code></td><td>string</td><td><code>"Show password"</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>string</td><td><code>"Show password"</code></td><td>No</td></tr><tr><td><code>hideLabel</code></td><td>string</td><td><code>"Hide password"</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>readonly</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Password"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"password"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Enter your password"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"current-password"</code></td><td>No</td></tr><tr><td><code>minlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>maxlength</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"</code></td><td>No</td></tr><tr><td><code>fields</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>visible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>toggleable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>toggleMode</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>checkboxLabel</code></td><td>string</td><td><code>"Show password"</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>string</td><td><code>"Show password"</code></td><td>No</td></tr><tr><td><code>hideLabel</code></td><td>string</td><td><code>"Hide password"</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>readonly</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>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>validationMessage</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>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ page TooltipDetail {
|
|||||||
<span class="showcase-eyebrow">Overlays component</span>
|
<span class="showcase-eyebrow">Overlays component</span>
|
||||||
<h1>Tooltip</h1>
|
<h1>Tooltip</h1>
|
||||||
<p>Theme-aware, responsive tooltip component.</p>
|
<p>Theme-aware, responsive tooltip component.</p>
|
||||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -46,7 +46,7 @@ page TooltipDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-tooltip-size"><span><strong>size</strong><small>string</small></span><select id="playground-tooltip-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-tooltip-color"><span><strong>color</strong><small>string</small></span><select id="playground-tooltip-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-tooltip-title"><span><strong>title</strong><small>string</small></span><input id="playground-tooltip-title" name="pg_title" type="text" value="Tooltip example" /></label><label class="playground-field" for="playground-tooltip-description"><span><strong>description</strong><small>string</small></span><input id="playground-tooltip-description" name="pg_description" type="text" value="A polished default tooltip for a modern application." /></label><label class="playground-toggle" for="playground-tooltip-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-tooltip-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-tooltip-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-tooltip-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-tooltip-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-tooltip-closeLabel" name="pg_closeLabel" type="text" value="Tooltip" /></label><label class="playground-field" for="playground-tooltip-class"><span><strong>class</strong><small>string</small></span><input id="playground-tooltip-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-tooltip-size"><span><strong>size</strong><small>string</small></span><select id="playground-tooltip-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-tooltip-color"><span><strong>color</strong><small>string</small></span><select id="playground-tooltip-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-tooltip-title"><span><strong>title</strong><small>string</small></span><input id="playground-tooltip-title" name="pg_title" type="text" value="Tooltip example" /></label><label class="playground-field" for="playground-tooltip-description"><span><strong>description</strong><small>string</small></span><input id="playground-tooltip-description" name="pg_description" type="text" value="A polished default tooltip for a modern application." /></label><label class="playground-toggle" for="playground-tooltip-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-tooltip-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-tooltip-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-tooltip-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-tooltip-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-tooltip-closeLabel" name="pg_closeLabel" type="text" value="Tooltip" /></label><label class="playground-field" for="playground-tooltip-class"><span><strong>class</strong><small>string</small></span><input id="playground-tooltip-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -121,11 +121,15 @@ page TooltipDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('open', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Tooltip"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Tooltip"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>open</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>closeLabel</code></td><td>string</td><td><code>"Close"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#tooltip-demo-1">Production default</a><a href="#tooltip-demo-2">Compact application</a><a href="#tooltip-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#tooltip-demo-1">Production default</a><a href="#tooltip-demo-2">Compact application</a><a href="#tooltip-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page TreeViewDetail {
|
|||||||
<span class="showcase-eyebrow">Base component</span>
|
<span class="showcase-eyebrow">Base component</span>
|
||||||
<h1>Tree View</h1>
|
<h1>Tree View</h1>
|
||||||
<p>Theme-aware, responsive tree view component.</p>
|
<p>Theme-aware, responsive tree view component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page TreeViewDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-tree-view-size"><span><strong>size</strong><small>string</small></span><select id="playground-tree-view-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-tree-view-color"><span><strong>color</strong><small>string</small></span><select id="playground-tree-view-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-tree-view-title"><span><strong>title</strong><small>string</small></span><input id="playground-tree-view-title" name="pg_title" type="text" value="Tree View example" /></label><label class="playground-field" for="playground-tree-view-description"><span><strong>description</strong><small>string</small></span><input id="playground-tree-view-description" name="pg_description" type="text" value="A polished default tree view for a modern application." /></label><label class="playground-field" for="playground-tree-view-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-tree-view-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-tree-view-size"><span><strong>size</strong><small>string</small></span><select id="playground-tree-view-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-tree-view-color"><span><strong>color</strong><small>string</small></span><select id="playground-tree-view-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-tree-view-title"><span><strong>title</strong><small>string</small></span><input id="playground-tree-view-title" name="pg_title" type="text" value="Tree View example" /></label><label class="playground-field" for="playground-tree-view-description"><span><strong>description</strong><small>string</small></span><input id="playground-tree-view-description" name="pg_description" type="text" value="A polished default tree view for a modern application." /></label><label class="playground-field" for="playground-tree-view-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-tree-view-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "tree-view-0-1",
|
"id": "tree-view-0-1",
|
||||||
"key": "tree-view-0-1",
|
"key": "tree-view-0-1",
|
||||||
@@ -649,11 +649,15 @@ page TreeViewDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@expand</code><span>Fires when the component emits the expand event.</span></div><div><code>@collapse</code><span>Fires when the component emits the collapse event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('select', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Tree View"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Tree View"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#tree-view-demo-1">Production default</a><a href="#tree-view-demo-2">Compact application</a><a href="#tree-view-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#tree-view-demo-1">Production default</a><a href="#tree-view-demo-2">Compact application</a><a href="#tree-view-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -40,7 +40,7 @@ page TypographyDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-typography-size"><span><strong>size</strong><small>string</small></span><select id="playground-typography-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-typography-color"><span><strong>color</strong><small>string</small></span><select id="playground-typography-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-typography-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-typography-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-typography-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-typography-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-typography-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-typography-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-typography-class"><span><strong>class</strong><small>string</small></span><input id="playground-typography-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
<div class="playground-fields"><label class="playground-field" for="playground-typography-size"><span><strong>size</strong><small>string</small></span><select id="playground-typography-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-typography-color"><span><strong>color</strong><small>string</small></span><select id="playground-typography-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-typography-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-typography-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-typography-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-typography-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-typography-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-typography-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-typography-class"><span><strong>class</strong><small>string</small></span><input id="playground-typography-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -103,11 +103,11 @@ page TypographyDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#typography-demo-1">Production default</a><a href="#typography-demo-2">Compact application</a><a href="#typography-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#typography-demo-1">Production default</a><a href="#typography-demo-2">Compact application</a><a href="#typography-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ page WysiwygEditorDetail {
|
|||||||
<span class="showcase-eyebrow">Integrations component</span>
|
<span class="showcase-eyebrow">Integrations component</span>
|
||||||
<h1>Wysiwyg Editor</h1>
|
<h1>Wysiwyg Editor</h1>
|
||||||
<p>Theme-aware, responsive wysiwyg editor component.</p>
|
<p>Theme-aware, responsive wysiwyg editor component.</p>
|
||||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
|
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||||
</header>
|
</header>
|
||||||
@@ -150,7 +150,7 @@ page WysiwygEditorDetail {
|
|||||||
</div>
|
</div>
|
||||||
<form class="playground-controls" data-playground-form>
|
<form class="playground-controls" data-playground-form>
|
||||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||||
<div class="playground-fields"><label class="playground-field" for="playground-wysiwyg-editor-size"><span><strong>size</strong><small>string</small></span><select id="playground-wysiwyg-editor-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</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-wysiwyg-editor-color"><span><strong>color</strong><small>string</small></span><select id="playground-wysiwyg-editor-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-wysiwyg-editor-title"><span><strong>title</strong><small>string</small></span><input id="playground-wysiwyg-editor-title" name="pg_title" type="text" value="Wysiwyg Editor example" /></label><label class="playground-field" for="playground-wysiwyg-editor-description"><span><strong>description</strong><small>string</small></span><input id="playground-wysiwyg-editor-description" name="pg_description" type="text" value="A polished default wysiwyg editor for a modern application." /></label><label class="playground-field" for="playground-wysiwyg-editor-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-wysiwyg-editor-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
<div class="playground-fields"><label class="playground-field" for="playground-wysiwyg-editor-size"><span><strong>size</strong><small>string</small></span><select id="playground-wysiwyg-editor-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-wysiwyg-editor-color"><span><strong>color</strong><small>string</small></span><select id="playground-wysiwyg-editor-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-wysiwyg-editor-title"><span><strong>title</strong><small>string</small></span><input id="playground-wysiwyg-editor-title" name="pg_title" type="text" value="Wysiwyg Editor example" /></label><label class="playground-field" for="playground-wysiwyg-editor-description"><span><strong>description</strong><small>string</small></span><input id="playground-wysiwyg-editor-description" name="pg_description" type="text" value="A polished default wysiwyg editor for a modern application." /></label><label class="playground-field" for="playground-wysiwyg-editor-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-wysiwyg-editor-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||||
{
|
{
|
||||||
"id": "wysiwyg-editor-0-1",
|
"id": "wysiwyg-editor-0-1",
|
||||||
"key": "wysiwyg-editor-0-1",
|
"key": "wysiwyg-editor-0-1",
|
||||||
@@ -649,11 +649,15 @@ page WysiwygEditorDetail {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</article></div></section>
|
</article></div></section>
|
||||||
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
||||||
|
|
||||||
|
component.addEventListener('input', (event) => {
|
||||||
|
console.log(event.detail)
|
||||||
|
})</code></pre></section></div></section>
|
||||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Wysiwyg Editor"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
<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>"Wysiwyg Editor"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||||
</main>
|
</main>
|
||||||
<aside class="detail-aside">
|
<aside class="detail-aside">
|
||||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#wysiwyg-editor-demo-1">Production default</a><a href="#wysiwyg-editor-demo-2">Compact application</a><a href="#wysiwyg-editor-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#wysiwyg-editor-demo-1">Production default</a><a href="#wysiwyg-editor-demo-2">Compact application</a><a href="#wysiwyg-editor-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<nav class="detail-pagination">
|
<nav class="detail-pagination">
|
||||||
|
|||||||
+23
-23
@@ -10,117 +10,117 @@ page FormsShowcase {
|
|||||||
<span class="showcase-eyebrow">Component category</span>
|
<span class="showcase-eyebrow">Component category</span>
|
||||||
<h1 class="showcase-title">Forms</h1>
|
<h1 class="showcase-title">Forms</h1>
|
||||||
<p class="showcase-description">11 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
<p class="showcase-description">11 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
|
||||||
<div class="category-meta"><span>11 components</span><span>Multiple use cases</span><span>33 live configurations</span></div>
|
<div class="category-meta"><span>11 components</span><span>Multiple use cases</span><span>103 live configurations</span></div>
|
||||||
</header>
|
</header>
|
||||||
<div class="catalog-grid">
|
<div class="catalog-grid">
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Checkbox" size="default" label="Checkbox" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Checkbox" size="default" color="primary" id="checkbox-1" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[]" options="[]" checked="true" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>8 props · 0 slots</span><a href="/components/checkbox">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>27 props · 0 slots</span><a href="/components/checkbox">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="ColorPicker" size="default" label="Color Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="ColorPicker" size="default" color="primary" id="color-picker-1" name="color-pickerField" label="Brand color" placeholder="Enter color picker" value="#2563eb" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Color Picker</h2><p>Theme-aware, responsive color picker component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Color Picker</h2><p>Theme-aware, responsive color picker component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/color-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>19 props · 0 slots</span><a href="/components/color-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="FileInput" size="default" label="File Input" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="FileInput" size="default" color="primary" id="file-input-1" name="file-inputField" label="Profile image" placeholder="Choose an image" icon="" iconPosition="start" accept="image/png,image/jpeg" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>File Input</h2><p>Theme-aware, responsive file input component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>File Input</h2><p>Theme-aware, responsive file input component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/file-input">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>21 props · 0 slots</span><a href="/components/file-input">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Input" size="default" label="Input" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Input" size="default" color="primary" id="input-1" name="inputField" label="Email address" placeholder="Enter input" value="" type="email" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false" autocomplete="email"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/input">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>28 props · 0 slots</span><a href="/components/input">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="InputGroup" size="default" label="Input Group" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="InputGroup" size="default" color="primary" id="input-group-1" name="input-groupField" label="Workspace" value="" placeholder="Enter input group" startText="https://" endText=".app" icon="" iconPosition="start" actionLabel="Check" helperText="Helpful context for this field." cornerHint="" error="" inline="false" variant="normal" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Input Group</h2><p>Theme-aware, responsive input group component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Input Group</h2><p>Theme-aware, responsive input group component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/input-group">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/input-group">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Radio" size="default" label="Radio" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Radio" size="default" color="primary" id="radio-1" name="radioField" label="Standard plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="standard" options="[]" checked="true" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>8 props · 0 slots</span><a href="/components/radio">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>25 props · 0 slots</span><a href="/components/radio">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="RangeSlider" size="default" label="Range Slider" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="RangeSlider" size="default" color="primary" id="range-slider-1" name="range-sliderField" label="Volume" placeholder="Enter range slider" variant="normal" icon="" iconPosition="start" value="60" min="0" max="100" step="5" showBounds="true" showSteps="false" marks="[]" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Range Slider</h2><p>Theme-aware, responsive range slider component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Range Slider</h2><p>Theme-aware, responsive range slider component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/range-slider">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>26 props · 0 slots</span><a href="/components/range-slider">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Select" size="default" label="Select" value="sample-1" 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" multiple="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Select" size="default" color="primary" id="select-1" name="selectField" label="Team" value="" options="[{"label":"Engineering","value":"engineering"},{"label":"Design","value":"design"},{"label":"Marketing","value":"marketing"}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>10 props · 0 slots</span><a href="/components/select">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>22 props · 0 slots</span><a href="/components/select">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Switch" size="default" label="Switch" value="sample-1" checked="false" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Switch" size="default" color="primary" id="switch-1" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>8 props · 0 slots</span><a href="/components/switch">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>20 props · 0 slots</span><a href="/components/switch">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="Textarea" size="default" label="Textarea" value="sample-1" placeholder="Enter a sample value" rows="5" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="Textarea" size="default" color="primary" id="textarea-1" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>10 props · 0 slots</span><a href="/components/textarea">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/textarea">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
<article class="catalog-card">
|
<article class="catalog-card">
|
||||||
<div class="catalog-card-preview">
|
<div class="catalog-card-preview">
|
||||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||||
<div class="catalog-card-stage"><div data-component="TimePicker" size="default" label="Time Picker" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
|
<div class="catalog-card-stage"><div data-component="TimePicker" size="default" color="primary" id="time-picker-1" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="catalog-card-body">
|
<div class="catalog-card-body">
|
||||||
<div><span class="catalog-card-category">Forms</span><h2>Time Picker</h2><p>Theme-aware, responsive time picker component.</p></div>
|
<div><span class="catalog-card-category">Forms</span><h2>Time Picker</h2><p>Theme-aware, responsive time picker component.</p></div>
|
||||||
<div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/time-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
<div class="catalog-card-footer"><span>26 props · 0 slots</span><a href="/components/time-picker">Explore component <span aria-hidden="true">→</span></a></div>
|
||||||
</div>
|
</div>
|
||||||
</article></div>
|
</article></div>
|
||||||
}
|
}
|
||||||
|
|||||||
+2
-2
@@ -17,11 +17,11 @@ page ComponentShowcase {
|
|||||||
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>85 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/blocks">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
|
<section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>85 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/blocks">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
|
||||||
<section class="showcase-stats">
|
<section class="showcase-stats">
|
||||||
<div class="showcase-stat"><strong>85</strong><span>Unique components</span></div>
|
<div class="showcase-stat"><strong>85</strong><span>Unique components</span></div>
|
||||||
<div class="showcase-stat"><strong>339</strong><span>Live configurations</span></div>
|
<div class="showcase-stat"><strong>502</strong><span>Live configurations</span></div>
|
||||||
<div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
|
<div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
|
||||||
<div class="showcase-stat"><strong>8</strong><span>Focused categories</span></div>
|
<div class="showcase-stat"><strong>8</strong><span>Focused categories</span></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/advanced-forms"><span class="home-category-index">01</span><div><strong>Advanced Forms</strong><p>9 components · 106 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/base"><span class="home-category-index">02</span><div><strong>Base</strong><p>27 components · 86 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/forms"><span class="home-category-index">03</span><div><strong>Forms</strong><p>11 components · 33 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/integrations"><span class="home-category-index">04</span><div><strong>Integrations</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/layout"><span class="home-category-index">05</span><div><strong>Layout</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/navigation"><span class="home-category-index">06</span><div><strong>Navigation</strong><p>9 components · 27 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/overlays"><span class="home-category-index">07</span><div><strong>Overlays</strong><p>6 components · 18 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/tables"><span class="home-category-index">08</span><div><strong>Tables</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
<section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/advanced-forms"><span class="home-category-index">01</span><div><strong>Advanced Forms</strong><p>9 components · 116 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/base"><span class="home-category-index">02</span><div><strong>Base</strong><p>27 components · 169 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/forms"><span class="home-category-index">03</span><div><strong>Forms</strong><p>11 components · 103 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/integrations"><span class="home-category-index">04</span><div><strong>Integrations</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/layout"><span class="home-category-index">05</span><div><strong>Layout</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/navigation"><span class="home-category-index">06</span><div><strong>Navigation</strong><p>9 components · 27 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/overlays"><span class="home-category-index">07</span><div><strong>Overlays</strong><p>6 components · 18 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/tables"><span class="home-category-index">08</span><div><strong>Tables</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { v } from "@wrnexus/validation";
|
||||||
|
|
||||||
|
export default v.object({
|
||||||
|
validatedField: v.string().required("This field is required."),
|
||||||
|
});
|
||||||
+46
-1
@@ -1,7 +1,7 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@plugin "@iconify/tailwind4";
|
@plugin "@iconify/tailwind4";
|
||||||
@source "../**/*.wrn";
|
@source "../**/*.wrn";
|
||||||
@source "../../../packages/ui/components/*.wrn";
|
@source "../../node_modules/@wrnexus/ui/components/*.wrn";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
color-scheme: light dark;
|
color-scheme: light dark;
|
||||||
@@ -986,6 +986,10 @@ html[data-design-panel-open] .design-panel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.docs-directory-group > div > a {
|
.docs-directory-group > div > a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0.42rem 0.55rem;
|
padding: 0.42rem 0.55rem;
|
||||||
border-radius: 0.45rem;
|
border-radius: 0.45rem;
|
||||||
@@ -997,6 +1001,34 @@ html[data-design-panel-open] .design-panel {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.docs-directory-group > div > a > [data-docs-component-name] {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-directory-group [data-component-status] {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 0.08rem 0.32rem;
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
line-height: 1.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-directory-group [data-component-status="complete"] {
|
||||||
|
color: var(--wire-color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-directory-group [data-component-status="pending"] {
|
||||||
|
color: var(--wire-color-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-directory-group [data-component-status="working"] {
|
||||||
|
color: var(--wire-color-warning);
|
||||||
|
}
|
||||||
|
|
||||||
.docs-directory-group > div > a:hover,
|
.docs-directory-group > div > a:hover,
|
||||||
.docs-directory-group > div > a[aria-current="page"] {
|
.docs-directory-group > div > a[aria-current="page"] {
|
||||||
color: var(--wire-color-text);
|
color: var(--wire-color-text);
|
||||||
@@ -2287,6 +2319,19 @@ body {
|
|||||||
color: var(--wire-color-primary);
|
color: var(--wire-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.detail-toc-group {
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
color: var(--wire-color-text);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-toc-group + a,
|
||||||
|
.detail-toc-group + a + a,
|
||||||
|
.detail-toc-group + a + a + a {
|
||||||
|
padding-inline-start: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
.docs-table-wrap {
|
.docs-table-wrap {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border: 1px solid var(--wire-color-border);
|
border: 1px solid var(--wire-color-border);
|
||||||
|
|||||||
@@ -5,18 +5,21 @@
|
|||||||
"": {
|
"": {
|
||||||
"name": "component-showcase",
|
"name": "component-showcase",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6",
|
"@wrnexus/core": "^0.5.0",
|
||||||
"@wrnexus/dev-server": "^0.3.6",
|
"@wrnexus/dev-server": "^0.5.0",
|
||||||
"@wrnexus/helpers": "^0.3.6",
|
"@wrnexus/helpers": "^0.5.0",
|
||||||
"@wrnexus/plugin": "^0.3.6",
|
"@wrnexus/plugin": "^0.5.0",
|
||||||
"@wrnexus/syntax": "^0.3.6",
|
"@wrnexus/styles": "^0.5.0",
|
||||||
"@wrnexus/ui": "^0.3.6",
|
"@wrnexus/syntax": "^0.5.0",
|
||||||
|
"@wrnexus/ui": "^0.5.0",
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/lucide": "^1.2.118",
|
"@iconify-json/lucide": "^1.2.118",
|
||||||
"@iconify/tailwind4": "^1.2.3",
|
"@iconify/tailwind4": "^1.2.3",
|
||||||
"@tailwindcss/cli": "^4.0.0",
|
"@tailwindcss/cli": "^4.0.0",
|
||||||
"@types/bun": "^1.3.14",
|
"@types/bun": "^1.3.14",
|
||||||
|
"@wrnexus/cli": "^0.5.0",
|
||||||
|
"@wrnexus/compiler": "^0.5.0",
|
||||||
"tailwindcss": "^4.0.0",
|
"tailwindcss": "^4.0.0",
|
||||||
"typescript": "^5.5.0",
|
"typescript": "^5.5.0",
|
||||||
},
|
},
|
||||||
@@ -109,39 +112,41 @@
|
|||||||
|
|
||||||
"@types/node": ["@types/node@26.1.1", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw=="],
|
"@types/node": ["@types/node@26.1.1", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw=="],
|
||||||
|
|
||||||
"@wrnexus/compiler": ["@wrnexus/compiler@0.3.6", "", { "dependencies": { "@wrnexus/syntax": "^0.3.6" } }, "sha512-1tVuE3sFisiwk0pPhFB5XXguTzBi66J1vMen8LtsDp1U/+h1dELvRHLVSiU1yXaVIwOVkaKCdRMSUaT6l6S3eA=="],
|
"@wrnexus/cli": ["@wrnexus/cli@0.5.0", "", { "dependencies": { "@wrnexus/compiler": "^0.5.0", "@wrnexus/core": "^0.5.0", "@wrnexus/csr": "^0.5.0", "@wrnexus/db": "^0.5.0", "@wrnexus/dev-server": "^0.5.0", "@wrnexus/i18n": "^0.5.0", "@wrnexus/plugin": "^0.5.0", "@wrnexus/router": "^0.5.0", "@wrnexus/styles": "^0.5.0", "@wrnexus/syntax": "^0.5.0", "@wrnexus/ui": "^0.5.0", "@wrnexus/validation": "^0.5.0" }, "bin": { "wrnexus": "dist/index.js" } }, "sha512-ZdPNdROxXlHgCngRqBpZXJIEjFedcVsgEkNOBroG78ehLj88wYWotzANRDYsAaHpFq5nZBuEJNbNFdd/nECsgQ=="],
|
||||||
|
|
||||||
"@wrnexus/core": ["@wrnexus/core@0.3.6", "", {}, "sha512-zz5DMlz4OeylWKwYme6g6XFpE7x2Sg8V/b8TdSUjjmEZmATyIti7D/36S3O7iK9uUZi9DZnELuwdk49QzVbQ2w=="],
|
"@wrnexus/compiler": ["@wrnexus/compiler@0.5.0", "", { "dependencies": { "@wrnexus/syntax": "^0.5.0" } }, "sha512-94ccs3AU1gRM360VMIGqhLvc3czzV9KsNjV3W6On1NbVGRyKnUwTuHj5+UOplb5zfn+UlyTxJhS7bEB2rZgykg=="],
|
||||||
|
|
||||||
"@wrnexus/csr": ["@wrnexus/csr@0.3.6", "", { "dependencies": { "@wrnexus/core": "^0.3.6" } }, "sha512-ejMy+EjVrap6a2uBD0UjQZUveRRPTBf5AkZk9XwL88L08H51poPq9id8HC0UcHd3zgANCL/wg3U0MRqOW1FG0A=="],
|
"@wrnexus/core": ["@wrnexus/core@0.5.0", "", {}, "sha512-X5hrY6ib2pvpUHplz0KMCHV7SPVfY9eP4J99SI39efXuL2ekMd6Vr7ueh+MixscgBinjG8YdPTo/xs0gYwRx0A=="],
|
||||||
|
|
||||||
"@wrnexus/db": ["@wrnexus/db@0.3.6", "", {}, "sha512-f4Q8/fsvzTkjDAav2ZKWVZlM2WLAHjbwAKnbhsw1umNlqZ9rBdqpLt6vrqxeOVz3J8SFrrGPIEoByvrMijMM9A=="],
|
"@wrnexus/csr": ["@wrnexus/csr@0.5.0", "", { "dependencies": { "@wrnexus/core": "^0.5.0" } }, "sha512-sL4B/I7/oTtv/JC4HFSc9qGIW0f23bwTS9M0R9P7x5/LZibTOV9QbktpPJbWrcd+fVLHFXUb/LkicuugCgj81g=="],
|
||||||
|
|
||||||
"@wrnexus/dev-server": ["@wrnexus/dev-server@0.3.6", "", { "dependencies": { "@wrnexus/compiler": "^0.3.6", "@wrnexus/core": "^0.3.6", "@wrnexus/csr": "^0.3.6", "@wrnexus/db": "^0.3.6", "@wrnexus/dev-toolbar": "^0.3.6", "@wrnexus/i18n": "^0.3.6", "@wrnexus/plugin": "^0.3.6", "@wrnexus/pubsub": "^0.3.6", "@wrnexus/router": "^0.3.6", "@wrnexus/ssr": "^0.3.6", "@wrnexus/styles": "^0.3.6", "@wrnexus/ui": "^0.3.6", "@wrnexus/uploader": "^0.3.6", "@wrnexus/validation": "^0.3.6" } }, "sha512-qqcYmWKafg1V0qIrdFjUQyI52c002Pw/PB/o9HPiHrBUD+xklSQSH7dtpBEnaTO41/e21h3IdX5HULsucEz+og=="],
|
"@wrnexus/db": ["@wrnexus/db@0.5.0", "", {}, "sha512-RcKnaHZuf+vvBw9ew3MxuOy5CXL5H0NvejlvnPLNFBGj0bpiPbCPh0+G6P8u0Fk9xXe3tH3AGCPE07lQlMP2uA=="],
|
||||||
|
|
||||||
"@wrnexus/dev-toolbar": ["@wrnexus/dev-toolbar@0.3.6", "", {}, "sha512-HasuumkjrmDVEe4pCwqFSXZBUtuRdQN3jPj4ukJMOFTSXfeewPWOVt2goZ1Z+C2l6Mc3PeP8iGglP+XI6DeMDA=="],
|
"@wrnexus/dev-server": ["@wrnexus/dev-server@0.5.0", "", { "dependencies": { "@wrnexus/compiler": "^0.5.0", "@wrnexus/core": "^0.5.0", "@wrnexus/csr": "^0.5.0", "@wrnexus/db": "^0.5.0", "@wrnexus/dev-toolbar": "^0.5.0", "@wrnexus/i18n": "^0.5.0", "@wrnexus/plugin": "^0.5.0", "@wrnexus/pubsub": "^0.5.0", "@wrnexus/router": "^0.5.0", "@wrnexus/ssr": "^0.5.0", "@wrnexus/styles": "^0.5.0", "@wrnexus/ui": "^0.5.0", "@wrnexus/uploader": "^0.5.0", "@wrnexus/validation": "^0.5.0" } }, "sha512-T3vF8h4Gxv0OnAa0K3pxvyQoEpOoyDDPTknOVVqCjYOb/9LxiK12MlUTUuHgzT6gZS4tLbrHwOjtJTuaFpIAhA=="],
|
||||||
|
|
||||||
"@wrnexus/helpers": ["@wrnexus/helpers@0.3.6", "", { "dependencies": { "@wrnexus/core": "^0.3.6" } }, "sha512-t5iRnu0CYKP1lXzGfDKdUcKtAk27Cn1rCXTwe5NGDnahJQ02qt0aMj8IXHFZOpQUe6fgDZvEr2e++mxeluHp1w=="],
|
"@wrnexus/dev-toolbar": ["@wrnexus/dev-toolbar@0.5.0", "", {}, "sha512-7WIz+/bZkp+Y+FXlDVVJOOCqHrVFI8RbvvShsXx5QRl+H88srtuIknA6QsM3vnrXh5hwabkhDZxPqwreeVrN5Q=="],
|
||||||
|
|
||||||
"@wrnexus/i18n": ["@wrnexus/i18n@0.3.6", "", { "dependencies": { "@wrnexus/core": "^0.3.6" } }, "sha512-JGK94frba8Q7aTwhuRmZpK5sk0fiEZHpMGtYkIb0j/4//fpCT8ES9LJUmtzoDkbomVJlPsNQ5+FNWUoQCimZew=="],
|
"@wrnexus/helpers": ["@wrnexus/helpers@0.5.0", "", { "dependencies": { "@wrnexus/core": "^0.5.0" } }, "sha512-wDqhRt1cmqkOFxF988IYDFXVRDBYMDliXO96tvNR4JlI/krpgny6oQzwX6Llgc3gwe2WPhGEKs53Qjolikr+cg=="],
|
||||||
|
|
||||||
"@wrnexus/plugin": ["@wrnexus/plugin@0.3.6", "", { "dependencies": { "@wrnexus/syntax": "^0.3.6" } }, "sha512-XXP+NoyqIMR5hL3yQ7yQQXhIdS1SxEW2v4duP561u5E3l9kl+P6vViACf603MqjV1VSZupHeuBRGl8BL9SGrYg=="],
|
"@wrnexus/i18n": ["@wrnexus/i18n@0.5.0", "", { "dependencies": { "@wrnexus/core": "^0.5.0" } }, "sha512-Tt+P+hCRXrxrT2n0YLqFyn1YH06FU2jqcfZrgdYaRhjpaEjHC/2Vq76wHQbcHIjIUewgYpvo/dOqJK93/7h+Ng=="],
|
||||||
|
|
||||||
"@wrnexus/pubsub": ["@wrnexus/pubsub@0.3.6", "", {}, "sha512-G/W14++6rQDfRQUmrqwW6guKln+beri6yHDvgMflXeA3XoUdp1MY0K4HDl36bGSXWsrfqOQ/Aa9RQEKEkn9FIg=="],
|
"@wrnexus/plugin": ["@wrnexus/plugin@0.5.0", "", { "dependencies": { "@wrnexus/syntax": "^0.5.0" } }, "sha512-8OVYE821ytS97Yg7GmmfSe4mod+02B+jRZ8TUhvHWw+/9FWCA72UEI4z9pbFMj4dUZpw5h0YWyVtl8vcAwqGvA=="],
|
||||||
|
|
||||||
"@wrnexus/router": ["@wrnexus/router@0.3.6", "", { "dependencies": { "@wrnexus/compiler": "^0.3.6", "@wrnexus/core": "^0.3.6" } }, "sha512-HHpV4GR9bvUtYm6jPVLxThXH7+X5UTSFW7ri9eh8nZFEzDDV0TN9Q98x/wYxQXvOfQRUUFCyIJX4f4fZZKF26Q=="],
|
"@wrnexus/pubsub": ["@wrnexus/pubsub@0.5.0", "", {}, "sha512-mKB6EOS3PtxD2eAzN8TzHpqWXWptMGDhO/UFSkLXyO/wTsyaMN52CqxI5TAtFDCiHNkAifIfQp7ObgWT35EoQA=="],
|
||||||
|
|
||||||
"@wrnexus/ssr": ["@wrnexus/ssr@0.3.6", "", { "dependencies": { "@wrnexus/core": "^0.3.6" } }, "sha512-f5Gn+ZcZJsNxp0fj6oyM0X+1axH3LANKD/Ms47x3ei82MxHIn/2/EHHx+qYIGIlQyiw4zgW93oOK8qG0gCtFPg=="],
|
"@wrnexus/router": ["@wrnexus/router@0.5.0", "", { "dependencies": { "@wrnexus/compiler": "^0.5.0", "@wrnexus/core": "^0.5.0" } }, "sha512-y2ZKLltAWz6l4Jgf4K/HmBCiBOnAjFypBJbmL404G5d+UcIOd7/NYwZKaGaIG2WRMY+7WUpMLji++Bi7UXgVRg=="],
|
||||||
|
|
||||||
"@wrnexus/styles": ["@wrnexus/styles@0.3.6", "", { "dependencies": { "@wrnexus/core": "^0.3.6", "@wrnexus/plugin": "^0.3.6", "@wrnexus/uploader": "^0.3.6" } }, "sha512-y2/8/Ow3FAmEJexpcID2Ih/Bts9CziYJ/V1w9xWhWCRYtGP5ulVVpfnS7w8I3KFENUJYNYB5P0Q76Q5G+yE2qg=="],
|
"@wrnexus/ssr": ["@wrnexus/ssr@0.5.0", "", { "dependencies": { "@wrnexus/core": "^0.5.0" } }, "sha512-vl4FwuZbeWrTrIhxr+/VqickC3bRNz4+zP/HgsSbatycWJaC9mhLp4rr2kS2id5I4EcJAL1eHMBcPxDFywqoNg=="],
|
||||||
|
|
||||||
"@wrnexus/syntax": ["@wrnexus/syntax@0.3.6", "", {}, "sha512-dkr/RNiBVsF7niZajBJnSx1JuhDTgXxIQwgBjt7aeeZM9HJoIl687GQ8u9IIY4OXattdgvAoj/vpc0r+dIqjZQ=="],
|
"@wrnexus/styles": ["@wrnexus/styles@0.5.0", "", { "dependencies": { "@wrnexus/core": "^0.5.0", "@wrnexus/plugin": "^0.5.0", "@wrnexus/uploader": "^0.5.0" } }, "sha512-8UU1yXoF3dTUF085jrTjSA9xvERS5IUdXvEzT6H7/zorGaghIp8PB+IaL50kUEDT6oS2YZS2bZZ8kOnkI3uEXg=="],
|
||||||
|
|
||||||
"@wrnexus/ui": ["@wrnexus/ui@0.3.6", "", { "dependencies": { "@wrnexus/core": "^0.3.6" } }, "sha512-kvClqqCBHdW8u+0kIddAoo4ccfjeMjLaT5n5PX2U3S1CsJz/NyGuD2j82Vb76CYYB6pxJsUk2SwlCnCvzvKsCw=="],
|
"@wrnexus/syntax": ["@wrnexus/syntax@0.5.0", "", {}, "sha512-5dh+VJ+/lE+M/HtllrOtNN67wow1moZlvKdlhPjymfaaEhshY6sWnOgrjDllDDDc+xuMHUBrkMUx6OUnSQASMA=="],
|
||||||
|
|
||||||
"@wrnexus/uploader": ["@wrnexus/uploader@0.3.6", "", { "dependencies": { "@wrnexus/core": "^0.3.6" } }, "sha512-tCQhnHjAAYZM6uLiu2byDWMMAQpPV+DmsUKfxFGwcleP0PdVI1lMp6AgFD4WtdRtmiA7M4YIocTk8BW3MK5UNA=="],
|
"@wrnexus/ui": ["@wrnexus/ui@0.5.0", "", { "dependencies": { "@wrnexus/core": "^0.5.0" } }, "sha512-ECXlUp7aYOA5E/pWnHoNL8m+vvaWHCD2hFrG62xFSKFoGgP18KrP6IIYGwb6plB93QfDsCLObQicOhmxo9GGCQ=="],
|
||||||
|
|
||||||
"@wrnexus/validation": ["@wrnexus/validation@0.3.6", "", {}, "sha512-EfMgLilu0aykxdMwyc0azuoo/SVp8TatvHsg7w5yYsRE8FKYUFAWt8Ct/kC06QBAa0fvIQpkogH2rC8HAXY4wA=="],
|
"@wrnexus/uploader": ["@wrnexus/uploader@0.5.0", "", { "dependencies": { "@wrnexus/core": "^0.5.0" } }, "sha512-MiFCydGpWjl5BA5yET5ZuVKmZkm0zfCljWB0ZEG1mxSlFv3DpVZCnDkB5DZZKCIByGfpV8q4p/LVWuSFqgAH3w=="],
|
||||||
|
|
||||||
|
"@wrnexus/validation": ["@wrnexus/validation@0.5.0", "", {}, "sha512-/YRV48clsSV5n4HgWDgKXWE/h+AiMcr0MmScQlZ1lJE48LXKN4OS+yAzAWVT/+jgvomUkMZKLDu5Quc1H0gjXQ=="],
|
||||||
|
|
||||||
"boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
|
"boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
|
||||||
|
|
||||||
|
|||||||
Generated
+181
-51
@@ -8,18 +8,21 @@
|
|||||||
"name": "component-showcase",
|
"name": "component-showcase",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6",
|
"@wrnexus/core": "^0.5.0",
|
||||||
"@wrnexus/dev-server": "^0.3.6",
|
"@wrnexus/dev-server": "^0.5.0",
|
||||||
"@wrnexus/helpers": "^0.3.6",
|
"@wrnexus/helpers": "^0.5.0",
|
||||||
"@wrnexus/plugin": "^0.3.6",
|
"@wrnexus/plugin": "^0.5.0",
|
||||||
"@wrnexus/syntax": "^0.3.6",
|
"@wrnexus/styles": "^0.5.0",
|
||||||
"@wrnexus/ui": "^0.3.6"
|
"@wrnexus/syntax": "^0.5.0",
|
||||||
|
"@wrnexus/ui": "^0.5.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/lucide": "^1.2.118",
|
"@iconify-json/lucide": "^1.2.118",
|
||||||
"@iconify/tailwind4": "^1.2.3",
|
"@iconify/tailwind4": "^1.2.3",
|
||||||
"@tailwindcss/cli": "^4.0.0",
|
"@tailwindcss/cli": "^4.0.0",
|
||||||
"@types/bun": "^1.3.14",
|
"@types/bun": "^1.3.14",
|
||||||
|
"@wrnexus/cli": "^0.5.0",
|
||||||
|
"@wrnexus/compiler": "^0.5.0",
|
||||||
"tailwindcss": "^4.0.0",
|
"tailwindcss": "^4.0.0",
|
||||||
"typescript": "^5.5.0"
|
"typescript": "^5.5.0"
|
||||||
}
|
}
|
||||||
@@ -708,6 +711,72 @@
|
|||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
|
||||||
|
"version": "1.11.1",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@emnapi/wasi-threads": "1.2.2",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
|
||||||
|
"version": "1.11.1",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
|
||||||
|
"version": "1.2.2",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@tybys/wasm-util": "^0.10.1"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/Brooooooklyn"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emnapi/core": "^1.7.1",
|
||||||
|
"@emnapi/runtime": "^1.7.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
|
||||||
|
"version": "0.10.2",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
|
||||||
|
"version": "2.8.1",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "0BSD",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
||||||
"version": "4.3.3",
|
"version": "4.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
|
||||||
@@ -760,169 +829,230 @@
|
|||||||
"undici-types": "~8.3.0"
|
"undici-types": "~8.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/compiler": {
|
"node_modules/@wrnexus/cli": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/cli/-/cli-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-ZdPNdROxXlHgCngRqBpZXJIEjFedcVsgEkNOBroG78ehLj88wYWotzANRDYsAaHpFq5nZBuEJNbNFdd/nECsgQ==",
|
||||||
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/syntax": "^0.3.6"
|
"@wrnexus/compiler": "^0.5.0",
|
||||||
|
"@wrnexus/core": "^0.5.0",
|
||||||
|
"@wrnexus/csr": "^0.5.0",
|
||||||
|
"@wrnexus/db": "^0.5.0",
|
||||||
|
"@wrnexus/dev-server": "^0.5.0",
|
||||||
|
"@wrnexus/i18n": "^0.5.0",
|
||||||
|
"@wrnexus/plugin": "^0.5.0",
|
||||||
|
"@wrnexus/router": "^0.5.0",
|
||||||
|
"@wrnexus/styles": "^0.5.0",
|
||||||
|
"@wrnexus/syntax": "^0.5.0",
|
||||||
|
"@wrnexus/ui": "^0.5.0",
|
||||||
|
"@wrnexus/validation": "^0.5.0"
|
||||||
|
},
|
||||||
|
"bin": {
|
||||||
|
"wrnexus": "dist/index.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"bun": ">=1.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@wrnexus/compiler": {
|
||||||
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/compiler/-/compiler-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-94ccs3AU1gRM360VMIGqhLvc3czzV9KsNjV3W6On1NbVGRyKnUwTuHj5+UOplb5zfn+UlyTxJhS7bEB2rZgykg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@wrnexus/syntax": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/core": {
|
"node_modules/@wrnexus/core": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/core/-/core-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-X5hrY6ib2pvpUHplz0KMCHV7SPVfY9eP4J99SI39efXuL2ekMd6Vr7ueh+MixscgBinjG8YdPTo/xs0gYwRx0A==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/csr": {
|
"node_modules/@wrnexus/csr": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/csr/-/csr-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-sL4B/I7/oTtv/JC4HFSc9qGIW0f23bwTS9M0R9P7x5/LZibTOV9QbktpPJbWrcd+fVLHFXUb/LkicuugCgj81g==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6"
|
"@wrnexus/core": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/db": {
|
"node_modules/@wrnexus/db": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/db/-/db-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-RcKnaHZuf+vvBw9ew3MxuOy5CXL5H0NvejlvnPLNFBGj0bpiPbCPh0+G6P8u0Fk9xXe3tH3AGCPE07lQlMP2uA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/dev-server": {
|
"node_modules/@wrnexus/dev-server": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/dev-server/-/dev-server-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-T3vF8h4Gxv0OnAa0K3pxvyQoEpOoyDDPTknOVVqCjYOb/9LxiK12MlUTUuHgzT6gZS4tLbrHwOjtJTuaFpIAhA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/compiler": "^0.3.6",
|
"@wrnexus/compiler": "^0.5.0",
|
||||||
"@wrnexus/core": "^0.3.6",
|
"@wrnexus/core": "^0.5.0",
|
||||||
"@wrnexus/csr": "^0.3.6",
|
"@wrnexus/csr": "^0.5.0",
|
||||||
"@wrnexus/db": "^0.3.6",
|
"@wrnexus/db": "^0.5.0",
|
||||||
"@wrnexus/dev-toolbar": "^0.3.6",
|
"@wrnexus/dev-toolbar": "^0.5.0",
|
||||||
"@wrnexus/i18n": "^0.3.6",
|
"@wrnexus/i18n": "^0.5.0",
|
||||||
"@wrnexus/plugin": "^0.3.6",
|
"@wrnexus/plugin": "^0.5.0",
|
||||||
"@wrnexus/pubsub": "^0.3.6",
|
"@wrnexus/pubsub": "^0.5.0",
|
||||||
"@wrnexus/router": "^0.3.6",
|
"@wrnexus/router": "^0.5.0",
|
||||||
"@wrnexus/ssr": "^0.3.6",
|
"@wrnexus/ssr": "^0.5.0",
|
||||||
"@wrnexus/styles": "^0.3.6",
|
"@wrnexus/styles": "^0.5.0",
|
||||||
"@wrnexus/ui": "^0.3.6",
|
"@wrnexus/ui": "^0.5.0",
|
||||||
"@wrnexus/uploader": "^0.3.6",
|
"@wrnexus/uploader": "^0.5.0",
|
||||||
"@wrnexus/validation": "^0.3.6"
|
"@wrnexus/validation": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/dev-toolbar": {
|
"node_modules/@wrnexus/dev-toolbar": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/dev-toolbar/-/dev-toolbar-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-7WIz+/bZkp+Y+FXlDVVJOOCqHrVFI8RbvvShsXx5QRl+H88srtuIknA6QsM3vnrXh5hwabkhDZxPqwreeVrN5Q==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/helpers": {
|
"node_modules/@wrnexus/helpers": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/helpers/-/helpers-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-wDqhRt1cmqkOFxF988IYDFXVRDBYMDliXO96tvNR4JlI/krpgny6oQzwX6Llgc3gwe2WPhGEKs53Qjolikr+cg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6"
|
"@wrnexus/core": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/i18n": {
|
"node_modules/@wrnexus/i18n": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/i18n/-/i18n-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-Tt+P+hCRXrxrT2n0YLqFyn1YH06FU2jqcfZrgdYaRhjpaEjHC/2Vq76wHQbcHIjIUewgYpvo/dOqJK93/7h+Ng==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6"
|
"@wrnexus/core": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/plugin": {
|
"node_modules/@wrnexus/plugin": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/plugin/-/plugin-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-8OVYE821ytS97Yg7GmmfSe4mod+02B+jRZ8TUhvHWw+/9FWCA72UEI4z9pbFMj4dUZpw5h0YWyVtl8vcAwqGvA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/syntax": "^0.3.6"
|
"@wrnexus/syntax": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/pubsub": {
|
"node_modules/@wrnexus/pubsub": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/pubsub/-/pubsub-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-mKB6EOS3PtxD2eAzN8TzHpqWXWptMGDhO/UFSkLXyO/wTsyaMN52CqxI5TAtFDCiHNkAifIfQp7ObgWT35EoQA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/router": {
|
"node_modules/@wrnexus/router": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/router/-/router-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-y2ZKLltAWz6l4Jgf4K/HmBCiBOnAjFypBJbmL404G5d+UcIOd7/NYwZKaGaIG2WRMY+7WUpMLji++Bi7UXgVRg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/compiler": "^0.3.6",
|
"@wrnexus/compiler": "^0.5.0",
|
||||||
"@wrnexus/core": "^0.3.6"
|
"@wrnexus/core": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/ssr": {
|
"node_modules/@wrnexus/ssr": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/ssr/-/ssr-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-vl4FwuZbeWrTrIhxr+/VqickC3bRNz4+zP/HgsSbatycWJaC9mhLp4rr2kS2id5I4EcJAL1eHMBcPxDFywqoNg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6"
|
"@wrnexus/core": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/styles": {
|
"node_modules/@wrnexus/styles": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/styles/-/styles-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-8UU1yXoF3dTUF085jrTjSA9xvERS5IUdXvEzT6H7/zorGaghIp8PB+IaL50kUEDT6oS2YZS2bZZ8kOnkI3uEXg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6",
|
"@wrnexus/core": "^0.5.0",
|
||||||
"@wrnexus/plugin": "^0.3.6",
|
"@wrnexus/plugin": "^0.5.0",
|
||||||
"@wrnexus/uploader": "^0.3.6"
|
"@wrnexus/uploader": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/syntax": {
|
"node_modules/@wrnexus/syntax": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/syntax/-/syntax-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-5dh+VJ+/lE+M/HtllrOtNN67wow1moZlvKdlhPjymfaaEhshY6sWnOgrjDllDDDc+xuMHUBrkMUx6OUnSQASMA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/ui": {
|
"node_modules/@wrnexus/ui": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/ui/-/ui-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-ECXlUp7aYOA5E/pWnHoNL8m+vvaWHCD2hFrG62xFSKFoGgP18KrP6IIYGwb6plB93QfDsCLObQicOhmxo9GGCQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6"
|
"@wrnexus/core": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/uploader": {
|
"node_modules/@wrnexus/uploader": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/uploader/-/uploader-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-MiFCydGpWjl5BA5yET5ZuVKmZkm0zfCljWB0ZEG1mxSlFv3DpVZCnDkB5DZZKCIByGfpV8q4p/LVWuSFqgAH3w==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6"
|
"@wrnexus/core": "^0.5.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@wrnexus/validation": {
|
"node_modules/@wrnexus/validation": {
|
||||||
"version": "0.3.6",
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@wrnexus/validation/-/validation-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-/YRV48clsSV5n4HgWDgKXWE/h+AiMcr0MmScQlZ1lJE48LXKN4OS+yAzAWVT/+jgvomUkMZKLDu5Quc1H0gjXQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"bun": ">=1.3.0"
|
"bun": ">=1.3.0"
|
||||||
|
|||||||
+10
-7
@@ -18,22 +18,25 @@
|
|||||||
"update:preview": "wrnexus update . --dry-run"
|
"update:preview": "wrnexus update . --dry-run"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@wrnexus/core": "^0.3.6",
|
"@wrnexus/core": "^0.5.0",
|
||||||
"@wrnexus/dev-server": "^0.3.6",
|
"@wrnexus/dev-server": "^0.5.0",
|
||||||
"@wrnexus/helpers": "^0.3.6",
|
"@wrnexus/helpers": "^0.5.0",
|
||||||
"@wrnexus/plugin": "^0.3.6",
|
"@wrnexus/plugin": "^0.5.0",
|
||||||
"@wrnexus/syntax": "^0.3.6",
|
"@wrnexus/styles": "^0.5.0",
|
||||||
"@wrnexus/ui": "^0.3.6"
|
"@wrnexus/syntax": "^0.5.0",
|
||||||
|
"@wrnexus/ui": "^0.5.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/lucide": "^1.2.118",
|
"@iconify-json/lucide": "^1.2.118",
|
||||||
"@iconify/tailwind4": "^1.2.3",
|
"@iconify/tailwind4": "^1.2.3",
|
||||||
"@tailwindcss/cli": "^4.0.0",
|
"@tailwindcss/cli": "^4.0.0",
|
||||||
|
"@wrnexus/cli": "^0.5.0",
|
||||||
|
"@wrnexus/compiler": "^0.5.0",
|
||||||
"@types/bun": "^1.3.14",
|
"@types/bun": "^1.3.14",
|
||||||
"tailwindcss": "^4.0.0",
|
"tailwindcss": "^4.0.0",
|
||||||
"typescript": "^5.5.0"
|
"typescript": "^5.5.0"
|
||||||
},
|
},
|
||||||
"wrnexus": {
|
"wrnexus": {
|
||||||
"version": "0.3.6"
|
"version": "0.5.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
|
||||||
|
<rect width="160" height="160" rx="28" fill="#7c3aed"/>
|
||||||
|
<circle cx="80" cy="62" r="31" fill="#f5c7a9"/>
|
||||||
|
<path d="M45 67c0-36 14-52 37-52 25 0 38 19 34 56-8-12-14-23-17-34-13 17-31 27-54 30Z" fill="#3f1d18"/>
|
||||||
|
<circle cx="68" cy="65" r="3" fill="#292524"/>
|
||||||
|
<circle cx="92" cy="65" r="3" fill="#292524"/>
|
||||||
|
<path d="M69 79c8 6 15 6 22 0" fill="none" stroke="#9a3412" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
<path d="M27 160c4-39 22-59 53-59s49 20 53 59Z" fill="#f3e8ff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 553 B |
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
|
||||||
|
<rect width="160" height="160" rx="28" fill="#0f9f8f"/>
|
||||||
|
<circle cx="80" cy="61" r="31" fill="#8d5524"/>
|
||||||
|
<path d="M47 56c2-27 15-41 34-41 22 0 35 17 34 44-14-4-26-13-34-26-8 12-20 20-34 23Z" fill="#18181b"/>
|
||||||
|
<circle cx="69" cy="64" r="3" fill="#18181b"/>
|
||||||
|
<circle cx="92" cy="64" r="3" fill="#18181b"/>
|
||||||
|
<path d="M69 78c7 6 15 6 22 0" fill="none" stroke="#4a1d0b" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
<path d="M27 160c4-40 22-60 53-60s49 20 53 60Z" fill="#ccfbf1"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 552 B |
@@ -0,0 +1,18 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" role="img" aria-labelledby="title description">
|
||||||
|
<title id="title">Example profile portrait</title>
|
||||||
|
<desc id="description">Illustrated portrait of a person on a blue background.</desc>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#0ea5e9"/>
|
||||||
|
<stop offset="1" stop-color="#2563eb"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="160" height="160" rx="28" fill="url(#background)"/>
|
||||||
|
<circle cx="80" cy="62" r="31" fill="#fed7aa"/>
|
||||||
|
<path d="M49 61c2-28 16-42 34-42 22 0 34 18 31 45-10-5-19-14-24-24-9 13-23 21-41 21Z" fill="#312e81"/>
|
||||||
|
<circle cx="69" cy="64" r="3" fill="#1f2937"/>
|
||||||
|
<circle cx="93" cy="64" r="3" fill="#1f2937"/>
|
||||||
|
<path d="M70 78c7 6 14 6 21 0" fill="none" stroke="#9a3412" stroke-width="3" stroke-linecap="round"/>
|
||||||
|
<path d="M28 160c3-39 22-59 52-59s49 20 52 59Z" fill="#e0f2fe"/>
|
||||||
|
<path d="m61 104 19 23 20-23 11 56H49Z" fill="#ffffff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1005 B |
@@ -0,0 +1,23 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560" role="img" aria-labelledby="title description">
|
||||||
|
<title id="title">Abstract blue glass landscape</title>
|
||||||
|
<desc id="description">Layered translucent blue and teal shapes on a pale background.</desc>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#e0f2fe"/>
|
||||||
|
<stop offset="1" stop-color="#bae6fd"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#22d3ee" stop-opacity=".78"/>
|
||||||
|
<stop offset=".52" stop-color="#0284c7" stop-opacity=".82"/>
|
||||||
|
<stop offset="1" stop-color="#1d4ed8" stop-opacity=".9"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="960" height="560" fill="url(#background)"/>
|
||||||
|
<g transform="translate(92 46)">
|
||||||
|
<path d="M80 440 290 85l145 355Z" fill="#14b8a6" opacity=".42"/>
|
||||||
|
<path d="m170 440 238-335 190 335Z" fill="#06b6d4" opacity=".58"/>
|
||||||
|
<path d="m285 440 220-390 260 390Z" fill="url(#glass)"/>
|
||||||
|
<path d="m410 440 170-278 238 278Z" fill="#0369a1" opacity=".46"/>
|
||||||
|
<path d="m32 440 210-248 176 248Z" fill="#0ea5e9" opacity=".36"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
-276
@@ -1,276 +0,0 @@
|
|||||||
# WrNexus
|
|
||||||
|
|
||||||
> WrNexus is an SSR-first, **Bun-native** full-stack web framework. UI is written in
|
|
||||||
> `.wrn` files (its own component language — NOT React/JSX/Vue). Routing is file-based.
|
|
||||||
> This document teaches an AI how to write correct WrNexus code. It is private and
|
|
||||||
> post-dates model training data, so rely on THIS document, not prior web-framework
|
|
||||||
> assumptions.
|
|
||||||
|
|
||||||
## Golden rules
|
|
||||||
|
|
||||||
- **Pages, components, and layouts are `.wrn` files.** Do NOT write `.tsx`/`.jsx`/React
|
|
||||||
for UI. Do NOT use `useState`, hooks, JSX, or a client bundler.
|
|
||||||
- **Routing is file-based** under `app/`. The filename is the route. No router config.
|
|
||||||
- **Interactivity** lives in `state` + `{expr}` + `@event` inside `.wrn`. Components render
|
|
||||||
on the server and hydrate automatically — you never write client-side JS islands.
|
|
||||||
- **Runtime is Bun only** (uses `Bun.serve`, `bun:sqlite`, `Bun.password`, …). Node is not supported.
|
|
||||||
- To add files, prefer the CLI: `wrnexus generate page <Name>` / `component <name>` / `api <path>` / `schema <name>`.
|
|
||||||
|
|
||||||
## Project layout
|
|
||||||
|
|
||||||
```
|
|
||||||
app/
|
|
||||||
pages/ *.wrn → routes: index.wrn = "/", about.wrn = "/about", blog/[slug].wrn = "/blog/:slug"
|
|
||||||
components/ *.wrn → reusable UI, mounted in a page/component via <div data-component="name" ...props>
|
|
||||||
layouts/ *.wrn → named layouts; a page opts in with layout = "name"
|
|
||||||
api/ *.ts → HTTP handlers: export const GET/POST/PUT/PATCH/DELETE = async (ctx) => Response
|
|
||||||
middleware/ *.ts → export default async (ctx, next) => next()
|
|
||||||
realtime/ *.ts → export default defineRoom({ ... }) from "@wrnexus/core" (ws://host/realtime/<name>)
|
|
||||||
schemas/ *.ts → validation schemas (the `v` builder), used by forms + parseBody
|
|
||||||
locales/ *.json → i18n messages per language
|
|
||||||
db/ schema.ts, queries/*.sql, migrations/*.sql
|
|
||||||
styles/ global.css → Tailwind (default) or plain CSS
|
|
||||||
wrnexus.config.ts → app config (AppConfig from "@wrnexus/styles")
|
|
||||||
public/ → static assets served at /
|
|
||||||
```
|
|
||||||
|
|
||||||
## `.wrn` page
|
|
||||||
|
|
||||||
```wrn
|
|
||||||
page Home {
|
|
||||||
layout = "public" // optional: a component in app/layouts/<name>.wrn ("none" to skip)
|
|
||||||
|
|
||||||
state count = 0 // optional: seeds client-reactive state (omit for pure SSR)
|
|
||||||
|
|
||||||
seo {
|
|
||||||
title = "Home"
|
|
||||||
description = "..."
|
|
||||||
canonical = "/"
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<h1>Hello</h1>
|
|
||||||
<p>Count is {count}, doubled is {count * 2}.</p>
|
|
||||||
<button @click="count++">Increment</button>
|
|
||||||
<div data-component="counter" start="5" label="Clicks"></div>
|
|
||||||
}
|
|
||||||
|
|
||||||
style {
|
|
||||||
h1 { color: var(--wire-color-text); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## `.wrn` component
|
|
||||||
|
|
||||||
```wrn
|
|
||||||
component Counter {
|
|
||||||
props { // props come from mount attributes; each is coerced to the
|
|
||||||
start = 0 // TYPE of its default (so start="5" arrives as the number 5)
|
|
||||||
label = "Count"
|
|
||||||
}
|
|
||||||
state count = start // state may reference props
|
|
||||||
view {
|
|
||||||
<button @click="count++">{label}: {count}</button>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Mount it from any page/component: `<div data-component="counter" start="0" label="Clicks"></div>`.
|
|
||||||
Components render on the server with their props, then hydrate — no per-component JS.
|
|
||||||
|
|
||||||
## The `view { }` block (plain HTML + a few directives)
|
|
||||||
|
|
||||||
- `{expr}` — interpolate a JS expression. Reactive if it references `state`: `{count}`, `{count * 2}`, `{user.name}`.
|
|
||||||
- `@event="expr"` — bind a DOM event; the expression runs in the reactive scope: `@click="count++"`, `@input="name = event.target.value"`.
|
|
||||||
- `<div data-component="name" prop="v">` — mount a component (attrs become string props, coerced).
|
|
||||||
- `<slot></slot>` / `<slot name="x"></slot>` — component/layout slots; fill with `<div data-slot="x">…</div>`.
|
|
||||||
- **Server loop (DB/list/table):** `{#each <list> as <item>[, <i>]} …rows… {:empty} …fallback… {/each}` — iterates SSR data on the server and renders markup per item. `{item.field}` interpolates (HTML-escaped, XSS-safe). `<list>` is a JS expression, usually an `ssr` data binding (see "Data-driven tables" below). This is how you render a database table in `.wrn`.
|
|
||||||
- **Server conditional:** `{#if <expr>} … {:else if <expr>} … {:else} … {/if}` — renders the first truthy branch on the server. `<expr>` can reference `ssr` data, or the `item`/`index` of an enclosing `{#each}`. Works at page level and inside loops (e.g. `{#if r.active}<span>●</span>{:else}<span>○</span>{/if}` per row). For client-side show/hide based on reactive `state`, use `data-show="expr"` instead.
|
|
||||||
- i18n: `{t:home.title}` in text, `t:placeholder="form.name"` on attributes — resolved per request from `app/locales/`.
|
|
||||||
- Theme: any element with `data-wire-theme-toggle` toggles light/dark; `data-wire-theme-set="dark"` sets it.
|
|
||||||
- Void/self-closing tags are fine: `<br />`, `<img src="..." />`.
|
|
||||||
- Only `{` and `}` are special (interpolation). Don't use a bare `}` in view text.
|
|
||||||
|
|
||||||
## Data-driven tables / lists (server-rendered `.wrn`)
|
|
||||||
|
|
||||||
Use an `ssr` data binding to fetch rows on the server, then `{#each}` to render them.
|
|
||||||
This renders on the **server** (SSR-first) and is HTML-escaped by default.
|
|
||||||
|
|
||||||
```wrn
|
|
||||||
page Admin {
|
|
||||||
layout = "dashboard"
|
|
||||||
|
|
||||||
// Fetch on the server. The api handler at /api/contacts returns { contacts: [...] };
|
|
||||||
// this block's `return contacts` exposes that array (via `$data`) as the binding `rows`.
|
|
||||||
ssr {
|
|
||||||
api rows GET /api/contacts { return contacts }
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
{#each rows as r, i}
|
|
||||||
<tr>
|
|
||||||
<td>#{i}</td>
|
|
||||||
<td>{r.name}</td>
|
|
||||||
<td><a href="mailto:{r.email}">{r.email}</a></td>
|
|
||||||
</tr>
|
|
||||||
{:empty}
|
|
||||||
<tr><td colspan="3">No submissions yet.</td></tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
The matching API returns the array under a key the `ssr` block reads:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// app/api/contacts.ts → GET /api/contacts
|
|
||||||
import { getDb } from "@wrnexus/db";
|
|
||||||
export const GET = async () => {
|
|
||||||
const contacts = await getDb().all("SELECT id, name, email FROM contacts ORDER BY id DESC");
|
|
||||||
return Response.json({ contacts }); // ssr block does `return contacts`
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
**Prefer this `.wrn` + `{#each}` approach for DB-backed tables and lists.** (`.ts`/`.tsx`
|
|
||||||
pages returning an HTML string are also supported for fully-custom programmatic rendering,
|
|
||||||
but a `.wrn` page with `ssr` data + `{#each}` is the idiomatic, SSR-first way.)
|
|
||||||
|
|
||||||
## API routes (`app/api/*.ts`)
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// app/api/users/list.ts → GET /api/users/list
|
|
||||||
import { getDb } from "@wrnexus/db";
|
|
||||||
|
|
||||||
export const GET = async (ctx) => {
|
|
||||||
return Response.json({ users: await ListUsers(getDb()) });
|
|
||||||
};
|
|
||||||
|
|
||||||
export const POST = async (ctx) => {
|
|
||||||
const body = await ctx.req.json();
|
|
||||||
return Response.json({ ok: true, body }, { status: 201 });
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
`ctx` (the `Context` from `@wrnexus/core`) has:
|
|
||||||
`req: Request`, `url: URL`, `params: Record<string,string>` (dynamic route params, e.g. `/users/[id]` → `ctx.params.id`),
|
|
||||||
`lang: string`, `t(key, params?)` (i18n), `cookies` (get/set), `session` (get/set). Auth: `getUser(ctx)` after `sessionAuth`/`logIn`.
|
|
||||||
|
|
||||||
When an SSO forward-auth verifier needs the URL that originally reached the gateway, use
|
|
||||||
`@wrnexus/helpers` instead of constructing it from untrusted headers:
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import { redirectToLogin } from "@wrnexus/helpers";
|
|
||||||
|
|
||||||
return redirectToLogin(ctx, "/login", {
|
|
||||||
allowedHosts: ["admin.localhost:3000", "reports.localhost:3000"],
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
The package also exports `getOriginalRequestUrl`, `getOriginalRequestOrigin`,
|
|
||||||
`getOriginalRequestPath`, and `getOriginalRequestMethod`. Always pass `allowedHosts` when
|
|
||||||
using forwarded gateway URLs; the helper rejects untrusted redirect destinations.
|
|
||||||
|
|
||||||
## Middleware & realtime
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// app/middleware/logger.ts
|
|
||||||
export default async function logger(ctx, next) {
|
|
||||||
console.log(ctx.req.method, ctx.url.pathname);
|
|
||||||
return next(); // return a Response WITHOUT calling next() to short-circuit
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// app/realtime/chat.ts → ws://host/realtime/chat
|
|
||||||
import { defineRoom } from "@wrnexus/core";
|
|
||||||
export default defineRoom({
|
|
||||||
onConnect(client) { client.send({ type: "system", text: "connected" }); },
|
|
||||||
onMessage(client, msg) { client.room.broadcast({ type: "message", data: msg }); },
|
|
||||||
});
|
|
||||||
```
|
|
||||||
Client side: a page opts in with `data-room="chat"` (handled by the realtime runtime).
|
|
||||||
|
|
||||||
## Config (`wrnexus.config.ts`)
|
|
||||||
|
|
||||||
```ts
|
|
||||||
import type { AppConfig } from "@wrnexus/styles";
|
|
||||||
const config: AppConfig = {
|
|
||||||
seo: { title: "App", titleTemplate: "%s | App", description: "..." },
|
|
||||||
styles: { entry: "app/styles/global.css", process: async ({ entryPath, mode }) => /* Tailwind */ "" },
|
|
||||||
fonts: { sans: '"Inter", system-ui, sans-serif', google: [{ family: "Inter", weights: [400, 600] }] },
|
|
||||||
theme: { default: "dark", themes: { light: { "color-primary": "#2563eb" } } },
|
|
||||||
i18n: { default: "en", locales: ["en", "es"] },
|
|
||||||
db: { driver: "sqlite", url: "file:./dev.db" },
|
|
||||||
security: { cors: { enabled: true, origin: ["http://localhost:5173"] } },
|
|
||||||
// profiles: { production: { db: { driver: "postgres", url: process.env.DATABASE_URL } } },
|
|
||||||
};
|
|
||||||
export default config;
|
|
||||||
```
|
|
||||||
|
|
||||||
## Database (`@wrnexus/db`)
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// app/db/schema.ts
|
|
||||||
import { v, table } from "@wrnexus/db";
|
|
||||||
export const users = table("users", {
|
|
||||||
id: v.id(),
|
|
||||||
name: v.string(),
|
|
||||||
email: v.string().unique(),
|
|
||||||
createdAt: v.timestamp(),
|
|
||||||
});
|
|
||||||
```
|
|
||||||
- Queries: write `app/db/queries/*.sql` with `-- name: ListUsers :many` blocks; `wrnexus db generate` emits typed functions.
|
|
||||||
- Access at runtime: `import { getDb } from "@wrnexus/db"; const rows = await ListUsers(getDb());`
|
|
||||||
- Migrations in `app/db/migrations/`; run `wrnexus db migrate` (dev auto-migrates sqlite).
|
|
||||||
|
|
||||||
## Validation (`@wrnexus/validation`)
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// app/schemas/login.ts
|
|
||||||
import { v } from "@wrnexus/validation";
|
|
||||||
export default v.object({
|
|
||||||
email: v.string().email(),
|
|
||||||
password: v.string().min(8),
|
|
||||||
});
|
|
||||||
```
|
|
||||||
In an API route: `import s from "../schemas/login"; import { parseBody } from "@wrnexus/validation"; const r = await parseBody(s, ctx.req);` → `r.ok ? r.value : r.response`.
|
|
||||||
In a form: `<form data-schema="login" action="/api/login" method="post">` + `<span data-error="email"></span>` (client + server validation wired automatically).
|
|
||||||
|
|
||||||
## AI / LLM (`@wrnexus/ai`)
|
|
||||||
|
|
||||||
```ts
|
|
||||||
// app/api/ai.ts
|
|
||||||
import { createAI } from "@wrnexus/ai";
|
|
||||||
const ai = createAI(); // reads ANTHROPIC_API_KEY; default model claude-opus-4-8
|
|
||||||
export const POST = async (ctx) => {
|
|
||||||
const { prompt } = await ctx.req.json();
|
|
||||||
return ai.streamResponse(prompt); // or: return Response.json({ text: await ai.generate(prompt) })
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## CLI
|
|
||||||
|
|
||||||
```
|
|
||||||
wrnexus dev . # dev server + HMR
|
|
||||||
wrnexus build . # production build → dist/server.js
|
|
||||||
bun dist/server.js # run the production server (or npm start)
|
|
||||||
wrnexus create <name> # scaffold a new app
|
|
||||||
wrnexus update --latest # deps + syntax/config migrations + verification
|
|
||||||
wrnexus generate page <Name> # scaffold a page (aliases: g p)
|
|
||||||
wrnexus generate component <name> | api <path> | schema <name>
|
|
||||||
wrnexus db migrate | rollback | status | new [--from-models] | generate | seed
|
|
||||||
wrnexus eject <component> # copy a Wire UI component's .wrn into app/components to customize
|
|
||||||
```
|
|
||||||
|
|
||||||
## When asked to "create a page/component/feature"
|
|
||||||
|
|
||||||
1. Create the `.wrn` file under `app/pages/` (or `app/components/`) with a `page`/`component` block — or run `wrnexus generate page <Name>`.
|
|
||||||
2. Put markup in `view { }`, interactive bits in `state` + `{expr}` + `@event`, reusable UI as components mounted via `data-component`.
|
|
||||||
3. For data, add an `app/api/*.ts` route and `getDb()`; for forms, add an `app/schemas/*.ts` and `data-schema`.
|
|
||||||
4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wire-*)`), or `style { }`.
|
|
||||||
5. Never emit React/JSX, a manual router, or client-side island JS — the framework handles hydration.
|
|
||||||
Loaded 100 of 104 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user