// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page AdvancedSelectDetail {
  layout = "showcase"
  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default advanced select"
  state playground_name = ctx.url.searchParams.get("pg_name") ?? "advanced-select-1"
  state playground_value = ctx.url.searchParams.get("pg_value") ?? "design"
  state playground_values = JSON.parse(ctx.url.searchParams.get("pg_values") ?? "[]")
  state playground_options = JSON.parse(ctx.url.searchParams.get("pg_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}]")
  state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]")
  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Choose a team"
  state playground_placeholderIcon = ctx.url.searchParams.get("pg_placeholderIcon") ?? ""
  state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Search options…"
  state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true"
  state playground_searchable = (ctx.url.searchParams.get("pg_searchable") ?? "true") === "true"
  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
  state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
  state playground_allowEmpty = (ctx.url.searchParams.get("pg_allowEmpty") ?? "false") === "true"
  state playground_tags = (ctx.url.searchParams.get("pg_tags") ?? "false") === "true"
  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
  state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
  state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? ""
  state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
  state playground_loading = (ctx.url.searchParams.get("pg_loading") ?? "false") === "true"
  state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading options…"
  state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No options found"
  state playground_selectedOptionsLabel = ctx.url.searchParams.get("pg_selectedOptionsLabel") ?? "Selected options"
  state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear selection"
  state playground_createLabel = ctx.url.searchParams.get("pg_createLabel") ?? "Create"
  state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more"
  state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains"
  state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description"
  state playground_minSearchLength = Number(ctx.url.searchParams.get("pg_minSearchLength") ?? "0")
  state playground_searchResultLimit = Number(ctx.url.searchParams.get("pg_searchResultLimit") ?? "0")
  state playground_maxSelections = Number(ctx.url.searchParams.get("pg_maxSelections") ?? "0")
  state playground_showCounter = (ctx.url.searchParams.get("pg_showCounter") ?? "false") === "true"
  state playground_counterTemplate = ctx.url.searchParams.get("pg_counterTemplate") ?? "{selected} selected"
  state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default"
  state playground_selectedTemplate = ctx.url.searchParams.get("pg_selectedTemplate") ?? "default"
  state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
  state playground_scrollToSelected = (ctx.url.searchParams.get("pg_scrollToSelected") ?? "true") === "true"
  state playground_fixed = (ctx.url.searchParams.get("pg_fixed") ?? "false") === "true"
  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
  state playground_remote = (ctx.url.searchParams.get("pg_remote") ?? "false") === "true"
  state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? ""
  state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q"
  state playground_remoteDebounce = Number(ctx.url.searchParams.get("pg_remoteDebounce") ?? "250")
  state playground_remoteAutoLoad = (ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true") === "true"
  state playground_infinite = (ctx.url.searchParams.get("pg_infinite") ?? "false") === "true"
  state playground_hasMore = (ctx.url.searchParams.get("pg_hasMore") ?? "false") === "true"
  state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1")
  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
  seo {
    title = "Advanced Select"
    description = "Theme-aware, responsive advanced select component."
  }
  view {
    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/advanced-forms">Advanced Forms</a><span aria-hidden="true">/</span><span>Advanced Select</span>
    </nav>
    <header class="detail-hero">
      <div class="detail-hero-copy">
        <span class="showcase-eyebrow">Advanced Forms component</span>
        <h1>Advanced Select</h1>
        <p>Theme-aware, responsive advanced select component.</p>
        <div class="detail-badges"><span>51 props</span><span>0 slots</span><span>8 outputs</span><span>Theme ready</span><span>Responsive</span></div>
      </div>
      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
    </header>
    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedSelect" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="search,select,change,clear,open,close,load,error">
      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Advanced Select</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
      <div class="playground-workbench">
        <div class="playground-preview">
          <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
          <div class="playground-preview-source" data-playground-preview><AdvancedSelect size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' values='{playground_values}' options='{playground_options}' groups='{playground_groups}' placeholder='{playground_placeholder}' placeholderIcon='{playground_placeholderIcon}' searchPlaceholder='{playground_searchPlaceholder}' multiple='{playground_multiple}' searchable='{playground_searchable}' defaultOpen='{playground_defaultOpen}' clearable='{playground_clearable}' allowEmpty='{playground_allowEmpty}' tags='{playground_tags}' disabled='{playground_disabled}' required='{playground_required}' invalid='{playground_invalid}' validationMessage='{playground_validationMessage}' helpText='{playground_helpText}' loading='{playground_loading}' loadingLabel='{playground_loadingLabel}' emptyLabel='{playground_emptyLabel}' selectedOptionsLabel='{playground_selectedOptionsLabel}' clearLabel='{playground_clearLabel}' createLabel='{playground_createLabel}' loadMoreLabel='{playground_loadMoreLabel}' searchMode='{playground_searchMode}' searchFields='{playground_searchFields}' minSearchLength='{playground_minSearchLength}' searchResultLimit='{playground_searchResultLimit}' maxSelections='{playground_maxSelections}' showCounter='{playground_showCounter}' counterTemplate='{playground_counterTemplate}' optionTemplate='{playground_optionTemplate}' selectedTemplate='{playground_selectedTemplate}' closeOnSelect='{playground_closeOnSelect}' scrollToSelected='{playground_scrollToSelected}' fixed='{playground_fixed}' placement='{playground_placement}' remote='{playground_remote}' remoteUrl='{playground_remoteUrl}' remoteQueryParam='{playground_remoteQueryParam}' remoteDebounce='{playground_remoteDebounce}' remoteAutoLoad='{playground_remoteAutoLoad}' infinite='{playground_infinite}' hasMore='{playground_hasMore}' page='{playground_page}' class='{playground_class}' /></div>
          <section class="playground-code" aria-label="Current component code">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
            <pre><code data-playground-code>&lt;AdvancedSelect
  label="Default advanced select"
  name="advanced-select-1"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
          <div class="playground-status" data-playground-status aria-live="polite"></div>
          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
        </div>
        <form class="playground-controls" data-playground-form>
          <header><div><span>Component props</span><strong>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="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>unknown[]</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>unknown[]</small></span><textarea id="playground-advanced-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
  &#123;
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "/showcase-images/avatar-design.svg"
  &#125;,
  &#123;
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "/showcase-images/avatar-engineering.svg"
  &#125;,
  &#123;
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "/showcase-images/avatar-growth.svg"
  &#125;,
  &#123;
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  &#125;
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-groups"><span><strong>groups</strong><small>unknown[]</small></span><textarea id="playground-advanced-select-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-advanced-select-placeholder" name="pg_placeholder" type="text" value="Choose a team" /></label><label class="playground-field" for="playground-advanced-select-placeholderIcon"><span><strong>placeholder Icon</strong><small>string</small></span><input id="playground-advanced-select-placeholderIcon" name="pg_placeholderIcon" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-advanced-select-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Search options…" /></label><label class="playground-toggle" for="playground-advanced-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-advanced-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-searchable"><span><strong>searchable</strong><small>boolean</small></span><input id="playground-advanced-select-searchable" name="pg_searchable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-advanced-select-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-advanced-select-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-allowEmpty"><span><strong>allow Empty</strong><small>boolean</small></span><input id="playground-advanced-select-allowEmpty" name="pg_allowEmpty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-tags"><span><strong>tags</strong><small>boolean</small></span><input id="playground-advanced-select-tags" name="pg_tags" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-advanced-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-advanced-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-advanced-select-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-advanced-select-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-advanced-select-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-advanced-select-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-advanced-select-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-advanced-select-loadingLabel" name="pg_loadingLabel" type="text" value="Loading options…" /></label><label class="playground-field" for="playground-advanced-select-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-advanced-select-emptyLabel" name="pg_emptyLabel" type="text" value="No options found" /></label><label class="playground-field" for="playground-advanced-select-selectedOptionsLabel"><span><strong>selected Options Label</strong><small>string</small></span><input id="playground-advanced-select-selectedOptionsLabel" name="pg_selectedOptionsLabel" type="text" value="Selected options" /></label><label class="playground-field" for="playground-advanced-select-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-advanced-select-clearLabel" name="pg_clearLabel" type="text" value="Clear selection" /></label><label class="playground-field" for="playground-advanced-select-createLabel"><span><strong>create Label</strong><small>string</small></span><input id="playground-advanced-select-createLabel" name="pg_createLabel" type="text" value="Create" /></label><label class="playground-field" for="playground-advanced-select-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-advanced-select-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-advanced-select-searchMode"><span><strong>search Mode</strong><small>string</small></span><input id="playground-advanced-select-searchMode" name="pg_searchMode" type="text" value="contains" /></label><label class="playground-field" for="playground-advanced-select-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-advanced-select-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-advanced-select-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-advanced-select-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-advanced-select-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-advanced-select-searchResultLimit" name="pg_searchResultLimit" type="number" value="0" /></label><label class="playground-field" for="playground-advanced-select-maxSelections"><span><strong>max Selections</strong><small>number</small></span><input id="playground-advanced-select-maxSelections" name="pg_maxSelections" type="number" value="0" /></label><label class="playground-toggle" for="playground-advanced-select-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-advanced-select-showCounter" name="pg_showCounter" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-counterTemplate"><span><strong>counter Template</strong><small>string</small></span><input id="playground-advanced-select-counterTemplate" name="pg_counterTemplate" type="text" value="{selected} selected" /></label><label class="playground-field" for="playground-advanced-select-optionTemplate"><span><strong>option Template</strong><small>string</small></span><input id="playground-advanced-select-optionTemplate" name="pg_optionTemplate" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-select-selectedTemplate"><span><strong>selected Template</strong><small>string</small></span><input id="playground-advanced-select-selectedTemplate" name="pg_selectedTemplate" type="text" value="default" /></label><label class="playground-toggle" for="playground-advanced-select-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-advanced-select-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-scrollToSelected"><span><strong>scroll To Selected</strong><small>boolean</small></span><input id="playground-advanced-select-scrollToSelected" name="pg_scrollToSelected" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-advanced-select-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-advanced-select-placement" name="pg_placement"><option value="bottom" selected>bottom</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-toggle" for="playground-advanced-select-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-advanced-select-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-advanced-select-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-advanced-select-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-advanced-select-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-advanced-select-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-advanced-select-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-advanced-select-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-advanced-select-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-advanced-select-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-page"><span><strong>page</strong><small>number</small></span><input id="playground-advanced-select-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-advanced-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-select-class" name="pg_class" type="text" value="" /></label></div>
        </form>
      </div>
    </section>
    <div class="detail-layout">
      <main class="detail-content">
        <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Default advanced select</h2><p>Live default advanced select configuration with copyable component code.</p></div>
          <span class="demo-case-number">01</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Default advanced select"
  name="advanced-select-1"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Grouped options</h2><p>Live grouped options configuration with copyable component code.</p></div>
          <span class="demo-case-number">02</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Grouped options"
  name="advanced-select-2"
  value="design"
  values='[]'
  options='[]'
  groups='[
    <span>&#123;</span>
      "label": "Product",
      "options": [
        <span>&#123;</span>
          "value": "design",
          "label": "Design",
          "description": "Product and visual design",
          "icon": "icon-[lucide--palette]",
          "color": "#8b5cf6",
          "avatar": "/showcase-images/avatar-design.svg"
        <span>&#125;</span>,
        <span>&#123;</span>
          "value": "engineering",
          "label": "Engineering",
          "description": "Platform and application engineering",
          "icon": "icon-[lucide--code-2]",
          "color": "#0ea5e9",
          "avatar": "/showcase-images/avatar-engineering.svg"
        <span>&#125;</span>
      ]
    <span>&#125;</span>,
    <span>&#123;</span>
      "label": "Business",
      "options": [
        <span>&#123;</span>
          "value": "growth",
          "label": "Growth",
          "description": "Marketing and customer growth",
          "icon": "icon-[lucide--trending-up]",
          "color": "#10b981",
          "avatar": "/showcase-images/avatar-growth.svg"
        <span>&#125;</span>,
        <span>&#123;</span>
          "value": "support",
          "label": "Support",
          "description": "Customer operations",
          "disabled": false
        <span>&#125;</span>
      ]
    <span>&#125;</span>
  ]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Fixed-position dropdown</h2><p>Live fixed-position dropdown configuration with copyable component code.</p></div>
          <span class="demo-case-number">03</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Fixed-position dropdown"
  name="advanced-select-3"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  fixed="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Placeholder with icon</h2><p>Live placeholder with icon configuration with copyable component code.</p></div>
          <span class="demo-case-number">04</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Placeholder with icon"
  name="advanced-select-4"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a workspace"
  placeholderIcon="icon-[lucide--building-2]"
  searchable="false"
  allowEmpty="false"
  optionTemplate="icon"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Allow empty selection</h2><p>Live allow empty selection configuration with copyable component code.</p></div>
          <span class="demo-case-number">05</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Allow empty selection"
  name="advanced-select-5"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Multiple selection</h2><p>Live multiple selection configuration with copyable component code.</p></div>
          <span class="demo-case-number">06</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Multiple selection"
  name="advanced-select-6"
  values='[
    "design",
    "engineering"
  ]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  multiple="true"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Multiple selection with optgroups</h2><p>Live multiple selection with optgroups configuration with copyable component code.</p></div>
          <span class="demo-case-number">07</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Multiple selection with optgroups"
  name="advanced-select-7"
  values='[
    "design",
    "engineering"
  ]'
  options='[]'
  groups='[
    <span>&#123;</span>
      "label": "Product",
      "options": [
        <span>&#123;</span>
          "value": "design",
          "label": "Design",
          "description": "Product and visual design",
          "icon": "icon-[lucide--palette]",
          "color": "#8b5cf6",
          "avatar": "/showcase-images/avatar-design.svg"
        <span>&#125;</span>,
        <span>&#123;</span>
          "value": "engineering",
          "label": "Engineering",
          "description": "Platform and application engineering",
          "icon": "icon-[lucide--code-2]",
          "color": "#0ea5e9",
          "avatar": "/showcase-images/avatar-engineering.svg"
        <span>&#125;</span>
      ]
    <span>&#125;</span>,
    <span>&#123;</span>
      "label": "Business",
      "options": [
        <span>&#123;</span>
          "value": "growth",
          "label": "Growth",
          "description": "Marketing and customer growth",
          "icon": "icon-[lucide--trending-up]",
          "color": "#10b981",
          "avatar": "/showcase-images/avatar-growth.svg"
        <span>&#125;</span>,
        <span>&#123;</span>
          "value": "support",
          "label": "Support",
          "description": "Customer operations",
          "disabled": false
        <span>&#125;</span>
      ]
    <span>&#125;</span>
  ]'
  placeholder="Choose a team"
  multiple="true"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Multiple selection with option templates</h2><p>Live multiple selection with option templates configuration with copyable component code.</p></div>
          <span class="demo-case-number">08</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Multiple selection with option templates"
  name="advanced-select-8"
  values='[
    "design",
    "engineering"
  ]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  multiple="true"
  searchable="false"
  allowEmpty="false"
  optionTemplate="icon"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Multiple selection with counter</h2><p>Live multiple selection with counter configuration with copyable component code.</p></div>
          <span class="demo-case-number">09</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Multiple selection with counter"
  name="advanced-select-9"
  values='[
    "design",
    "engineering"
  ]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  multiple="true"
  searchable="false"
  allowEmpty="false"
  showCounter="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Multiple selection with conditional counter</h2><p>Live multiple selection with conditional counter configuration with copyable component code.</p></div>
          <span class="demo-case-number">010</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Multiple selection with conditional counter"
  name="advanced-select-10"
  values='[
    "design",
    "engineering"
  ]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  multiple="true"
  searchable="false"
  allowEmpty="false"
  maxSelections="3"
  showCounter="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Selection</span><h2>Counter with option templates</h2><p>Live counter with option templates configuration with copyable component code.</p></div>
          <span class="demo-case-number">011</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Counter with option templates"
  name="advanced-select-11"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  showCounter="true"
  optionTemplate="icon"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Searchable dropdown</h2><p>Live searchable dropdown configuration with copyable component code.</p></div>
          <span class="demo-case-number">012</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Searchable dropdown"
  name="advanced-select-12"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Minimum search length</h2><p>Live minimum search length configuration with copyable component code.</p></div>
          <span class="demo-case-number">013</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Minimum search length"
  name="advanced-select-13"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
  minSearchLength="3"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Search result limit</h2><p>Live search result limit configuration with copyable component code.</p></div>
          <span class="demo-case-number">014</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Search result limit"
  name="advanced-select-14"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
  searchResultLimit="3"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Scroll to selected option</h2><p>Live scroll to selected option configuration with copyable component code.</p></div>
          <span class="demo-case-number">015</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Scroll to selected option"
  name="advanced-select-15"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Search match mode</h2><p>Live search match mode configuration with copyable component code.</p></div>
          <span class="demo-case-number">016</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Search match mode"
  name="advanced-select-16"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
  searchMode="startsWith"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Search labels and descriptions</h2><p>Live search labels and descriptions configuration with copyable component code.</p></div>
          <span class="demo-case-number">017</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Search labels and descriptions"
  name="advanced-select-17"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Tag-style selection</h2><p>Live tag-style selection configuration with copyable component code.</p></div>
          <span class="demo-case-number">018</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Tag-style selection"
  name="advanced-select-18"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  tags="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Disabled tag selection</h2><p>Live disabled tag selection configuration with copyable component code.</p></div>
          <span class="demo-case-number">019</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Disabled tag selection"
  name="advanced-select-19"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  tags="true"
  disabled="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Option template with icons</h2><p>Live option template with icons configuration with copyable component code.</p></div>
          <span class="demo-case-number">020</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Option template with icons"
  name="advanced-select-20"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  optionTemplate="icon"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Option template with avatars</h2><p>Live option template with avatars configuration with copyable component code.</p></div>
          <span class="demo-case-number">021</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Option template with avatars"
  name="advanced-select-21"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  optionTemplate="avatar"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Option template with color indicators</h2><p>Live option template with color indicators configuration with copyable component code.</p></div>
          <span class="demo-case-number">022</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Option template with color indicators"
  name="advanced-select-22"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  optionTemplate="color"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Search & templates</span><h2>Advanced select sizes</h2><p>Live advanced select sizes configuration with copyable component code.</p></div>
          <span class="demo-case-number">023</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  size="lg"
  label="Advanced select sizes"
  name="advanced-select-23"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Disabled advanced select</h2><p>Live disabled advanced select configuration with copyable component code.</p></div>
          <span class="demo-case-number">024</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Disabled advanced select"
  name="advanced-select-24"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  disabled="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Inside a modal</h2><p>Live inside a modal configuration with copyable component code.</p></div>
          <span class="demo-case-number">025</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Inside a modal"
  name="advanced-select-25"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Validation states</h2><p>Live validation states configuration with copyable component code.</p></div>
          <span class="demo-case-number">026</span>
        </header>
        <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="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>&lt;AdvancedSelect
  label="Validation states"
  name="advanced-select-26"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  required="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Dynamic validation styling</h2><p>Live dynamic validation styling configuration with copyable component code.</p></div>
          <span class="demo-case-number">027</span>
        </header>
        <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="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
          </div>
          <section class="demo-code" aria-label="Dynamic validation styling usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Dynamic validation styling"
  name="advanced-select-27"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  required="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Add or remove options</h2><p>Live add or remove options configuration with copyable component code.</p></div>
          <span class="demo-case-number">028</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Add or remove options"
  name="advanced-select-28"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Add or remove options in multiple mode</h2><p>Live add or remove options in multiple mode configuration with copyable component code.</p></div>
          <span class="demo-case-number">029</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Add or remove options in multiple mode"
  name="advanced-select-29"
  values='[
    "design",
    "engineering"
  ]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  multiple="true"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Set a single value programmatically</h2><p>Live set a single value programmatically configuration with copyable component code.</p></div>
          <span class="demo-case-number">030</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Set a single value programmatically"
  name="advanced-select-30"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Set multiple values programmatically</h2><p>Live set multiple values programmatically configuration with copyable component code.</p></div>
          <span class="demo-case-number">031</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Set multiple values programmatically"
  name="advanced-select-31"
  values='[
    "design",
    "engineering"
  ]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  multiple="true"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Remote data source</h2><p>Live remote data source configuration with copyable component code.</p></div>
          <span class="demo-case-number">032</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Remote data source"
  name="advanced-select-32"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
  minSearchLength="2"
  remote="true"
  remoteUrl="/api/teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Remote data source (multiple)</h2><p>Live remote data source (multiple) configuration with copyable component code.</p></div>
          <span class="demo-case-number">033</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Remote data source (multiple)"
  name="advanced-select-33"
  values='[
    "design",
    "engineering"
  ]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  multiple="true"
  allowEmpty="false"
  minSearchLength="2"
  remote="true"
  remoteUrl="/api/teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Remote data tags</h2><p>Live remote data tags configuration with copyable component code.</p></div>
          <span class="demo-case-number">034</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Remote data tags"
  name="advanced-select-34"
  values='[
    "design",
    "engineering"
  ]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  multiple="true"
  allowEmpty="false"
  tags="true"
  minSearchLength="2"
  remote="true"
  remoteUrl="/api/teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Option templates with remote data</h2><p>Live option templates with remote data configuration with copyable component code.</p></div>
          <span class="demo-case-number">035</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Option templates with remote data"
  name="advanced-select-35"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
  minSearchLength="2"
  optionTemplate="icon"
  remote="true"
  remoteUrl="/api/teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Conditional counter with remote data</h2><p>Live conditional counter with remote data configuration with copyable component code.</p></div>
          <span class="demo-case-number">036</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Conditional counter with remote data"
  name="advanced-select-36"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
  minSearchLength="2"
  maxSelections="3"
  showCounter="true"
  remote="true"
  remoteUrl="/api/teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Avatar template with remote data</h2><p>Live avatar template with remote data configuration with copyable component code.</p></div>
          <span class="demo-case-number">037</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Avatar template with remote data"
  name="advanced-select-37"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
  minSearchLength="2"
  optionTemplate="avatar"
  remote="true"
  remoteUrl="/api/teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Preselected values</h2><p>Live preselected values configuration with copyable component code.</p></div>
          <span class="demo-case-number">038</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Preselected values"
  name="advanced-select-38"
  value="engineering"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Infinite scroll</h2><p>Live infinite scroll configuration with copyable component code.</p></div>
          <span class="demo-case-number">039</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Infinite scroll"
  name="advanced-select-39"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
  remote="true"
  remoteUrl="/api/teams"
  infinite="true"
  hasMore="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Inside overflow-hidden containers</h2><p>Live inside overflow-hidden containers configuration with copyable component code.</p></div>
          <span class="demo-case-number">040</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Inside overflow-hidden containers"
  name="advanced-select-40"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
  fixed="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Advanced behavior</span><h2>Destroy and reinitialize</h2><p>Live destroy and reinitialize configuration with copyable component code.</p></div>
          <span class="demo-case-number">041</span>
        </header>
        <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">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Destroy and reinitialize"
  name="advanced-select-41"
  value="design"
  values='[]'
  options='[
    <span>&#123;</span>
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "/showcase-images/avatar-design.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "/showcase-images/avatar-engineering.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "/showcase-images/avatar-growth.svg"
    <span>&#125;</span>,
    <span>&#123;</span>
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    <span>&#125;</span>
  ]'
  groups='[]'
  placeholder="Choose a team"
  searchable="false"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
        </div>
      </article></div></section>
        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the current search query changes.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</span></div><div><code>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@load</code><span>Fires after remote or deferred content loads successfully.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AdvancedSelect
  @search='console.log(payload)'
  @select='console.log(payload)'
  @change='console.log(payload)'
  @clear='console.log(payload)'
  @open='console.log(payload)'
  @close='console.log(payload)'
  @load='console.log(payload)'
  @error='console.log(payload)'
/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>&#123;</span> registerOutputHandler <span>&#125;</span> from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"AdvancedSelect\"], [data-component=\"AdvancedSelect\"]")

if (component) registerOutputHandler(component, "search", (payload) =&gt; <span>&#123;</span>
  console.log("search", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "select", (payload) =&gt; <span>&#123;</span>
  console.log("select", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "change", (payload) =&gt; <span>&#123;</span>
  console.log("change", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "clear", (payload) =&gt; <span>&#123;</span>
  console.log("clear", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "open", (payload) =&gt; <span>&#123;</span>
  console.log("open", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "close", (payload) =&gt; <span>&#123;</span>
  console.log("close", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "load", (payload) =&gt; <span>&#123;</span>
  console.log("load", payload)
<span>&#125;</span>)

if (component) registerOutputHandler(component, "error", (payload) =&gt; <span>&#123;</span>
  console.log("error", payload)
<span>&#125;</span>)</code></pre></section></div></div></section>
        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"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>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>unknown[]</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>"<span>&#123;</span>selected<span>&#125;</span> 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</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>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
      </main>
      <aside class="detail-aside">
        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#advanced-select-demo-1">Default advanced select</a><a href="#advanced-select-demo-2">Grouped options</a><a href="#advanced-select-demo-3">Fixed-position dropdown</a><a href="#advanced-select-demo-4">Placeholder with icon</a><a href="#advanced-select-demo-5">Allow empty selection</a><a href="#advanced-select-demo-6">Multiple selection</a><a href="#advanced-select-demo-7">Multiple selection with optgroups</a><a href="#advanced-select-demo-8">Multiple selection with option templates</a><a href="#advanced-select-demo-9">Multiple selection with counter</a><a href="#advanced-select-demo-10">Multiple selection with conditional counter</a><a href="#advanced-select-demo-11">Counter with option templates</a><a href="#advanced-select-demo-12">Searchable dropdown</a><a href="#advanced-select-demo-13">Minimum search length</a><a href="#advanced-select-demo-14">Search result limit</a><a href="#advanced-select-demo-15">Scroll to selected option</a><a href="#advanced-select-demo-16">Search match mode</a><a href="#advanced-select-demo-17">Search labels and descriptions</a><a href="#advanced-select-demo-18">Tag-style selection</a><a href="#advanced-select-demo-19">Disabled tag selection</a><a href="#advanced-select-demo-20">Option template with icons</a><a href="#advanced-select-demo-21">Option template with avatars</a><a href="#advanced-select-demo-22">Option template with color indicators</a><a href="#advanced-select-demo-23">Advanced select sizes</a><a href="#advanced-select-demo-24">Disabled advanced select</a><a href="#advanced-select-demo-25">Inside a modal</a><a href="#advanced-select-demo-26">Validation states</a><a href="#advanced-select-demo-27">Dynamic validation styling</a><a href="#advanced-select-demo-28">Add or remove options</a><a href="#advanced-select-demo-29">Add or remove options in multiple mode</a><a href="#advanced-select-demo-30">Set a single value programmatically</a><a href="#advanced-select-demo-31">Set multiple values programmatically</a><a href="#advanced-select-demo-32">Remote data source</a><a href="#advanced-select-demo-33">Remote data source (multiple)</a><a href="#advanced-select-demo-34">Remote data tags</a><a href="#advanced-select-demo-35">Option templates with remote data</a><a href="#advanced-select-demo-36">Conditional counter with remote data</a><a href="#advanced-select-demo-37">Avatar template with remote data</a><a href="#advanced-select-demo-38">Preselected values</a><a href="#advanced-select-demo-39">Infinite scroll</a><a href="#advanced-select-demo-40">Inside overflow-hidden containers</a><a href="#advanced-select-demo-41">Destroy and reinitialize</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
      </aside>
    </div>
    <nav class="detail-pagination">
      <span></span>
      <a href="/components/combo-box"><small>Next</small><strong>Combo Box →</strong></a>
    </nav>
  }
}