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

feat: deployable design studio and updated component showcase

Browse Source
This commit is contained in:
Clintchiz committed 2026-10-19 13:18:06 +05:30
1 parent 3dddcaac1a
commit 3987ddbcfe
113 files changed
+4544 -1039
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/pages/components/advanced-select.wrn
+41 -41
View File
@@ -177,7 +177,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Default advanced select" name="advanced-select-1" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Default advanced select usage">
@@ -241,7 +241,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Grouped options" name="advanced-select-2" value="design" values='[]' options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Grouped options usage">
@@ -316,7 +316,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Fixed-position dropdown" name="advanced-select-3" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Fixed-position dropdown usage">
@@ -382,7 +382,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-4" class="demo-canvas demo-canvas--4">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Placeholder with icon" name="advanced-select-4" value="" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a workspace" placeholderIcon="icon-[lucide--building-2]" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Placeholder with icon usage">
@@ -448,7 +448,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-5" class="demo-canvas demo-canvas--5">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Allow empty selection" name="advanced-select-5" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="true" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Allow empty selection usage">
@@ -512,7 +512,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-6" class="demo-canvas demo-canvas--6">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection" name="advanced-select-6" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Multiple selection usage">
@@ -580,7 +580,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-7" class="demo-canvas demo-canvas--7">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with optgroups" name="advanced-select-7" value="" values='["design","engineering"]' options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Multiple selection with optgroups usage">
@@ -658,7 +658,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-8" class="demo-canvas demo-canvas--8">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with option templates" name="advanced-select-8" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Multiple selection with option templates usage">
@@ -727,7 +727,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-9" class="demo-canvas demo-canvas--9">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with counter" name="advanced-select-9" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Multiple selection with counter usage">
@@ -796,7 +796,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-10" class="demo-canvas demo-canvas--10">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with conditional counter" name="advanced-select-10" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Multiple selection with conditional counter usage">
@@ -866,7 +866,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-11" class="demo-canvas demo-canvas--11">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Counter with option templates" name="advanced-select-11" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Counter with option templates usage">
@@ -933,7 +933,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-12" class="demo-canvas demo-canvas--12">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Searchable dropdown" name="advanced-select-12" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Searchable dropdown usage">
@@ -997,7 +997,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-13" class="demo-canvas demo-canvas--13">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Minimum search length" name="advanced-select-13" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Minimum search length usage">
@@ -1062,7 +1062,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-14" class="demo-canvas demo-canvas--14">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Search result limit" name="advanced-select-14" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="3" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Search result limit usage">
@@ -1127,7 +1127,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-15" class="demo-canvas demo-canvas--15">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Scroll to selected option" name="advanced-select-15" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Scroll to selected option usage">
@@ -1192,7 +1192,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-16" class="demo-canvas demo-canvas--16">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Search match mode" name="advanced-select-16" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Search match mode usage">
@@ -1257,7 +1257,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-17" class="demo-canvas demo-canvas--17">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Search labels and descriptions" name="advanced-select-17" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Search labels and descriptions usage">
@@ -1321,7 +1321,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-18" class="demo-canvas demo-canvas--18">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Tag-style selection" name="advanced-select-18" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Tag-style selection usage">
@@ -1387,7 +1387,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-19" class="demo-canvas demo-canvas--19">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Disabled tag selection" name="advanced-select-19" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="true" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Disabled tag selection usage">
@@ -1454,7 +1454,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-20" class="demo-canvas demo-canvas--20">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Option template with icons" name="advanced-select-20" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Option template with icons usage">
@@ -1520,7 +1520,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-21" class="demo-canvas demo-canvas--21">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Option template with avatars" name="advanced-select-21" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Option template with avatars usage">
@@ -1586,7 +1586,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-22" class="demo-canvas demo-canvas--22">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Option template with color indicators" name="advanced-select-22" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="color" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Option template with color indicators usage">
@@ -1652,7 +1652,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-23" class="demo-canvas demo-canvas--23">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="lg" label="Advanced select sizes" name="advanced-select-23" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Advanced select sizes usage">
@@ -1718,7 +1718,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-24" class="demo-canvas demo-canvas--24">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Disabled advanced select" name="advanced-select-24" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Disabled advanced select usage">
@@ -1784,7 +1784,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-25" class="demo-canvas demo-canvas--25">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Inside a modal" name="advanced-select-25" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Inside a modal usage">
@@ -1849,7 +1849,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-26" class="demo-canvas demo-canvas--26">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><form data-schema="advanced-select-validation" class="demo-validation-form"><AdvancedSelect size="default" label="Validation states" name="advanced-select-26" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
</div>
<section class="demo-code" aria-label="Validation states usage">
@@ -1915,7 +1915,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-27" class="demo-canvas demo-canvas--27">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><form data-schema="advanced-select-dynamic-validation" class="demo-validation-form"><AdvancedSelect size="default" label="Dynamic validation styling" name="advanced-select-27" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /><button type="submit" class="wrn-btn wrn-btn--variant-default">Validate selection</button></form></div>
</div>
<section class="demo-code" aria-label="Dynamic validation styling usage">
@@ -1981,7 +1981,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-28" class="demo-canvas demo-canvas--28">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Add or remove options" name="advanced-select-28" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Add or remove options usage">
@@ -2046,7 +2046,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-29" class="demo-canvas demo-canvas--29">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Add or remove options in multiple mode" name="advanced-select-29" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Add or remove options in multiple mode usage">
@@ -2114,7 +2114,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-30" class="demo-canvas demo-canvas--30">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Set a single value programmatically" name="advanced-select-30" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Set a single value programmatically usage">
@@ -2179,7 +2179,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-31" class="demo-canvas demo-canvas--31">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Set multiple values programmatically" name="advanced-select-31" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Set multiple values programmatically usage">
@@ -2247,7 +2247,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-32" class="demo-canvas demo-canvas--32">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Remote data source" name="advanced-select-32" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Remote data source usage">
@@ -2314,7 +2314,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-33" class="demo-canvas demo-canvas--33">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Remote data source (multiple)" name="advanced-select-33" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Remote data source (multiple) usage">
@@ -2384,7 +2384,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-34" class="demo-canvas demo-canvas--34">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Remote data tags" name="advanced-select-34" value="" values='["design","engineering"]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Remote data tags usage">
@@ -2455,7 +2455,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-35" class="demo-canvas demo-canvas--35">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Option templates with remote data" name="advanced-select-35" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Option templates with remote data usage">
@@ -2523,7 +2523,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-36" class="demo-canvas demo-canvas--36">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Conditional counter with remote data" name="advanced-select-36" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Conditional counter with remote data usage">
@@ -2592,7 +2592,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-37" class="demo-canvas demo-canvas--37">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Avatar template with remote data" name="advanced-select-37" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Avatar template with remote data usage">
@@ -2660,7 +2660,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-38" class="demo-canvas demo-canvas--38">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Preselected values" name="advanced-select-38" value="engineering" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Preselected values usage">
@@ -2725,7 +2725,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-39" class="demo-canvas demo-canvas--39">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Infinite scroll" name="advanced-select-39" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="true" hasMore="true" /></div>
</div>
<section class="demo-code" aria-label="Infinite scroll usage">
@@ -2793,7 +2793,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-40" class="demo-canvas demo-canvas--40">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Inside overflow-hidden containers" name="advanced-select-40" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Inside overflow-hidden containers usage">
@@ -2859,7 +2859,7 @@ page AdvancedSelectDetail {
<div class="demo-workbench">
<div id="advanced-select-demo-41" class="demo-canvas demo-canvas--41">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><AdvancedSelect size="default" label="Destroy and reinitialize" name="advanced-select-41" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
</div>
<section class="demo-code" aria-label="Destroy and reinitialize usage">