// 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 = ctx.url.searchParams.get("pg_values") ?? "[]"
  state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n  {\n    \"value\": \"design\",\n    \"label\": \"Design\",\n    \"description\": \"Product and visual design\",\n    \"icon\": \"icon-[lucide--palette]\",\n    \"color\": \"#8b5cf6\",\n    \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"\n  },\n  {\n    \"value\": \"engineering\",\n    \"label\": \"Engineering\",\n    \"description\": \"Platform and application engineering\",\n    \"icon\": \"icon-[lucide--code-2]\",\n    \"color\": \"#0ea5e9\",\n    \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"\n  },\n  {\n    \"value\": \"growth\",\n    \"label\": \"Growth\",\n    \"description\": \"Marketing and customer growth\",\n    \"icon\": \"icon-[lucide--trending-up]\",\n    \"color\": \"#10b981\",\n    \"avatar\": \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"\n  },\n  {\n    \"value\": \"support\",\n    \"label\": \"Support\",\n    \"description\": \"Customer operations\",\n    \"disabled\": false\n  }\n]"
  state playground_groups = 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"
  state playground_searchable = ctx.url.searchParams.get("pg_searchable") ?? "true"
  state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "false"
  state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true"
  state playground_allowEmpty = ctx.url.searchParams.get("pg_allowEmpty") ?? "false"
  state playground_tags = ctx.url.searchParams.get("pg_tags") ?? "false"
  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
  state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
  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"
  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 = ctx.url.searchParams.get("pg_minSearchLength") ?? "0"
  state playground_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0"
  state playground_maxSelections = ctx.url.searchParams.get("pg_maxSelections") ?? "0"
  state playground_showCounter = ctx.url.searchParams.get("pg_showCounter") ?? "false"
  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"
  state playground_scrollToSelected = ctx.url.searchParams.get("pg_scrollToSelected") ?? "true"
  state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false"
  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
  state playground_remote = ctx.url.searchParams.get("pg_remote") ?? "false"
  state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? ""
  state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q"
  state playground_remoteDebounce = ctx.url.searchParams.get("pg_remoteDebounce") ?? "250"
  state playground_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true"
  state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false"
  state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false"
  state playground_page = 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 events</span><span>Theme ready</span><span>Responsive</span></div>
      </div>
      <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
    </header>
    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedSelect" data-playground-public-tag="true" data-playground-has-slot="false">
      <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><div data-component="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></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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  groups='[]'
  placeholder="Choose a team"
  allowEmpty="false"
/&gt;</code></pre>
          </section>
          <div class="playground-status" data-playground-status aria-live="polite"></div>
        </div>
        <form class="playground-controls" data-playground-form>
          <header><div><span>Component props</span><strong>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>string</small></span><textarea id="playground-advanced-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-advanced-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
  {
    "value": "design",
    "label": "Design",
    "description": "Product and visual design",
    "icon": "icon-[lucide--palette]",
    "color": "#8b5cf6",
    "avatar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"
  },
  {
    "value": "engineering",
    "label": "Engineering",
    "description": "Platform and application engineering",
    "icon": "icon-[lucide--code-2]",
    "color": "#0ea5e9",
    "avatar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"
  },
  {
    "value": "growth",
    "label": "Growth",
    "description": "Marketing and customer growth",
    "icon": "icon-[lucide--trending-up]",
    "color": "#10b981",
    "avatar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"
  },
  {
    "value": "support",
    "label": "Support",
    "description": "Customer operations",
    "disabled": false
  }
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-groups"><span><strong>groups</strong><small>string</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><select id="playground-advanced-select-searchMode" name="pg_searchMode"><option value="contains" selected>contains</option><option value="startsWith">startsWith</option><option value="exact">exact</option></select></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><select id="playground-advanced-select-optionTemplate" name="pg_optionTemplate"><option value="default" selected>default</option><option value="icon">icon</option><option value="avatar">avatar</option><option value="color">color</option></select></label><label class="playground-field" for="playground-advanced-select-selectedTemplate"><span><strong>selected Template</strong><small>string</small></span><select id="playground-advanced-select-selectedTemplate" name="pg_selectedTemplate"><option value="default" selected>default</option><option value="count">count</option><option value="text">text</option></select></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><input id="playground-advanced-select-placement" name="pg_placement" type="text" value="bottom" /></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"><div data-component="AdvancedSelect" size="default" label="Default advanced select" name="advanced-select-1" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Grouped options" name="advanced-select-2" value="design" values="[]" options="[]" groups="[{&quot;label&quot;:&quot;Product&quot;,&quot;options&quot;:[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;}]},{&quot;label&quot;:&quot;Business&quot;,&quot;options&quot;:[{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "label": "Product",
      "options": [
        &#123;
          "value": "design",
          "label": "Design",
          "description": "Product and visual design",
          "icon": "icon-[lucide--palette]",
          "color": "#8b5cf6",
          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
        &#125;,
        &#123;
          "value": "engineering",
          "label": "Engineering",
          "description": "Platform and application engineering",
          "icon": "icon-[lucide--code-2]",
          "color": "#0ea5e9",
          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
        &#125;
      ]
    &#125;,
    &#123;
      "label": "Business",
      "options": [
        &#123;
          "value": "growth",
          "label": "Growth",
          "description": "Marketing and customer growth",
          "icon": "icon-[lucide--trending-up]",
          "color": "#10b981",
          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
        &#125;,
        &#123;
          "value": "support",
          "label": "Support",
          "description": "Customer operations",
          "disabled": false
        &#125;
      ]
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Fixed-position dropdown" name="advanced-select-3" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Placeholder with icon" name="advanced-select-4" value="" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Allow empty selection" name="advanced-select-5" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Multiple selection" name="advanced-select-6" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Multiple selection with optgroups" name="advanced-select-7" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[]" groups="[{&quot;label&quot;:&quot;Product&quot;,&quot;options&quot;:[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;}]},{&quot;label&quot;:&quot;Business&quot;,&quot;options&quot;:[{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "label": "Product",
      "options": [
        &#123;
          "value": "design",
          "label": "Design",
          "description": "Product and visual design",
          "icon": "icon-[lucide--palette]",
          "color": "#8b5cf6",
          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
        &#125;,
        &#123;
          "value": "engineering",
          "label": "Engineering",
          "description": "Platform and application engineering",
          "icon": "icon-[lucide--code-2]",
          "color": "#0ea5e9",
          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
        &#125;
      ]
    &#125;,
    &#123;
      "label": "Business",
      "options": [
        &#123;
          "value": "growth",
          "label": "Growth",
          "description": "Marketing and customer growth",
          "icon": "icon-[lucide--trending-up]",
          "color": "#10b981",
          "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
        &#125;,
        &#123;
          "value": "support",
          "label": "Support",
          "description": "Customer operations",
          "disabled": false
        &#125;
      ]
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Multiple selection with option templates" name="advanced-select-8" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Multiple selection with counter" name="advanced-select-9" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Multiple selection with conditional counter" name="advanced-select-10" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Counter with option templates" name="advanced-select-11" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Searchable dropdown" name="advanced-select-12" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Minimum search length" name="advanced-select-13" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Search result limit" name="advanced-select-14" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Scroll to selected option" name="advanced-select-15" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Search match mode" name="advanced-select-16" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Search labels and descriptions" name="advanced-select-17" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Tag-style selection" name="advanced-select-18" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Disabled tag selection" name="advanced-select-19" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Option template with icons" name="advanced-select-20" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Option template with avatars" name="advanced-select-21" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Option template with color indicators" name="advanced-select-22" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="lg" label="Advanced select sizes" name="advanced-select-23" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Disabled advanced select" name="advanced-select-24" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Inside a modal" name="advanced-select-25" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Validation states" name="advanced-select-26" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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"></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
          </div>
          <section class="demo-code" aria-label="Validation states usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;AdvancedSelect
  label="Validation states"
  name="advanced-select-26"
  value="design"
  values='[]'
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Dynamic validation styling" name="advanced-select-27" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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"></div><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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Add or remove options" name="advanced-select-28" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Add or remove options in multiple mode" name="advanced-select-29" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Set a single value programmatically" name="advanced-select-30" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Set multiple values programmatically" name="advanced-select-31" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Remote data source" name="advanced-select-32" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Remote data source (multiple)" name="advanced-select-33" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Remote data tags" name="advanced-select-34" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Option templates with remote data" name="advanced-select-35" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Conditional counter with remote data" name="advanced-select-36" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Avatar template with remote data" name="advanced-select-37" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Preselected values" name="advanced-select-38" value="engineering" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Infinite scroll" name="advanced-select-39" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Inside overflow-hidden containers" name="advanced-select-40" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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"><div data-component="AdvancedSelect" size="default" label="Destroy and reinitialize" name="advanced-select-41" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;: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>
          </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='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%238b5cf6\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3ED%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "engineering",
      "label": "Engineering",
      "description": "Platform and application engineering",
      "icon": "icon-[lucide--code-2]",
      "color": "#0ea5e9",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%230ea5e9\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EE%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "growth",
      "label": "Growth",
      "description": "Marketing and customer growth",
      "icon": "icon-[lucide--trending-up]",
      "color": "#10b981",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\'%3E%3Crect width=\'64\' height=\'64\' rx=\'32\' fill=\'%2310b981\'/%3E%3Ctext x=\'32\' y=\'40\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'24\' fill=\'white\'%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "disabled": false
    &#125;
  ]'
  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 events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the search query changes or is submitted.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')

component.addEventListener('search', (event) =&gt; &#123;
  console.log(event.detail)
&#125;)</code></pre></section></div></section>
        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Advanced Select"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>values</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Select an option"</code></td><td>No</td></tr><tr><td><code>placeholderIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Search options…"</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>searchable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowEmpty</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>tags</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading options…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No options found"</code></td><td>No</td></tr><tr><td><code>selectedOptionsLabel</code></td><td>string</td><td><code>"Selected options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear selection"</code></td><td>No</td></tr><tr><td><code>createLabel</code></td><td>string</td><td><code>"Create"</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>maxSelections</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>counterTemplate</code></td><td>string</td><td><code>"&#123;selected&#125; 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">Events</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>
  }
}