// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page ComboBoxDetail {
  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 autocomplete"
  state playground_name = ctx.url.searchParams.get("pg_name") ?? "combobox-1"
  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
  state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"value\":\"design\",\"label\":\"Design\",\"description\":\"Product and visual design\",\"icon\":\"icon-[lucide--palette]\",\"color\":\"#8b5cf6\",\"avatar\":\"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\",\"icon\":\"icon-[lucide--life-buoy]\",\"color\":\"#f59e0b\"}]")
  state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]")
  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Search teams"
  state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Start typing…"
  state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
  state playground_allowCustomValue = (ctx.url.searchParams.get("pg_allowCustomValue") ?? "false") === "true"
  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
  state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
  state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? ""
  state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
  state playground_loading = (ctx.url.searchParams.get("pg_loading") ?? "false") === "true"
  state playground_loadingLabel = ctx.url.searchParams.get("pg_loadingLabel") ?? "Loading suggestions…"
  state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No matching options"
  state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear value"
  state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Toggle suggestions"
  state playground_searchMode = ctx.url.searchParams.get("pg_searchMode") ?? "contains"
  state playground_searchFields = ctx.url.searchParams.get("pg_searchFields") ?? "label,description"
  state playground_minSearchLength = Number(ctx.url.searchParams.get("pg_minSearchLength") ?? "0")
  state playground_searchResultLimit = Number(ctx.url.searchParams.get("pg_searchResultLimit") ?? "0")
  state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default"
  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
  state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
  state playground_fixed = (ctx.url.searchParams.get("pg_fixed") ?? "false") === "true"
  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
  state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "off"
  state playground_remote = (ctx.url.searchParams.get("pg_remote") ?? "false") === "true"
  state playground_remoteUrl = ctx.url.searchParams.get("pg_remoteUrl") ?? ""
  state playground_remoteQueryParam = ctx.url.searchParams.get("pg_remoteQueryParam") ?? "q"
  state playground_remoteDebounce = Number(ctx.url.searchParams.get("pg_remoteDebounce") ?? "250")
  state playground_remoteAutoLoad = (ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true") === "true"
  state playground_infinite = (ctx.url.searchParams.get("pg_infinite") ?? "false") === "true"
  state playground_hasMore = (ctx.url.searchParams.get("pg_hasMore") ?? "false") === "true"
  state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1")
  state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more"
  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
  seo {
    title = "Combo Box"
    description = "Editable autocomplete combobox with local and remote suggestions."
  }
  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>Combo Box</span>
    </nav>
    <header class="detail-hero">
      <div class="detail-hero-copy">
        <span class="showcase-eyebrow">Advanced Forms component</span>
        <h1>Combo Box</h1>
        <p>Editable autocomplete combobox with local and remote suggestions.</p>
        <div class="detail-badges"><span>41 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="ComboBox" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="search,select,change,clear,open,close,load,error">
      <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Combo Box</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><ComboBox size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' options='{playground_options}' groups='{playground_groups}' placeholder='{playground_placeholder}' searchPlaceholder='{playground_searchPlaceholder}' clearable='{playground_clearable}' allowCustomValue='{playground_allowCustomValue}' disabled='{playground_disabled}' required='{playground_required}' invalid='{playground_invalid}' validationMessage='{playground_validationMessage}' helpText='{playground_helpText}' loading='{playground_loading}' loadingLabel='{playground_loadingLabel}' emptyLabel='{playground_emptyLabel}' clearLabel='{playground_clearLabel}' toggleLabel='{playground_toggleLabel}' searchMode='{playground_searchMode}' searchFields='{playground_searchFields}' minSearchLength='{playground_minSearchLength}' searchResultLimit='{playground_searchResultLimit}' optionTemplate='{playground_optionTemplate}' defaultOpen='{playground_defaultOpen}' closeOnSelect='{playground_closeOnSelect}' fixed='{playground_fixed}' placement='{playground_placement}' autocomplete='{playground_autocomplete}' remote='{playground_remote}' remoteUrl='{playground_remoteUrl}' remoteQueryParam='{playground_remoteQueryParam}' remoteDebounce='{playground_remoteDebounce}' remoteAutoLoad='{playground_remoteAutoLoad}' infinite='{playground_infinite}' hasMore='{playground_hasMore}' page='{playground_page}' loadMoreLabel='{playground_loadMoreLabel}' class='{playground_class}' /></div>
          <section class="playground-code" aria-label="Current component code">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
            <pre><code data-playground-code>&lt;ComboBox
  label="Default autocomplete"
  name="combobox-1"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
/&gt;</code></pre>
          </section>
          <div class="playground-status" data-playground-status aria-live="polite"></div>
          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
        </div>
        <form class="playground-controls" data-playground-form>
          <header><div><span>Component props</span><strong>41 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
          <div class="playground-fields"><label class="playground-field" for="playground-combo-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-combo-box-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-combo-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-combo-box-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-combo-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-combo-box-label" name="pg_label" type="text" value="Default autocomplete" /></label><label class="playground-field" for="playground-combo-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-combo-box-name" name="pg_name" type="text" value="combobox-1" /></label><label class="playground-field" for="playground-combo-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-combo-box-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-combo-box-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
  {
    "value": "design",
    "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",
    "icon": "icon-[lucide--life-buoy]",
    "color": "#f59e0b"
  }
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-groups"><span><strong>groups</strong><small>string</small></span><textarea id="playground-combo-box-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-combo-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-combo-box-placeholder" name="pg_placeholder" type="text" value="Search teams" /></label><label class="playground-field" for="playground-combo-box-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-combo-box-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Start typing…" /></label><label class="playground-toggle" for="playground-combo-box-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-combo-box-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-allowCustomValue"><span><strong>allow Custom Value</strong><small>boolean</small></span><input id="playground-combo-box-allowCustomValue" name="pg_allowCustomValue" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-combo-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-combo-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-combo-box-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-combo-box-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-combo-box-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-combo-box-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-combo-box-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-combo-box-loadingLabel" name="pg_loadingLabel" type="text" value="Loading suggestions…" /></label><label class="playground-field" for="playground-combo-box-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-combo-box-emptyLabel" name="pg_emptyLabel" type="text" value="No matching options" /></label><label class="playground-field" for="playground-combo-box-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-combo-box-clearLabel" name="pg_clearLabel" type="text" value="Clear value" /></label><label class="playground-field" for="playground-combo-box-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-combo-box-toggleLabel" name="pg_toggleLabel" type="text" value="Toggle suggestions" /></label><label class="playground-field" for="playground-combo-box-searchMode"><span><strong>search Mode</strong><small>string</small></span><input id="playground-combo-box-searchMode" name="pg_searchMode" type="text" value="contains" /></label><label class="playground-field" for="playground-combo-box-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-combo-box-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-combo-box-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-combo-box-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-combo-box-searchResultLimit" name="pg_searchResultLimit" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-optionTemplate"><span><strong>option Template</strong><small>string</small></span><input id="playground-combo-box-optionTemplate" name="pg_optionTemplate" type="text" value="default" /></label><label class="playground-toggle" for="playground-combo-box-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-combo-box-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-combo-box-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-combo-box-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-combo-box-placement" name="pg_placement"><option value="bottom" selected>bottom</option><option value="top">top</option><option value="top-start">top-start</option><option value="top-end">top-end</option><option value="right">right</option><option value="right-start">right-start</option><option value="right-end">right-end</option><option value="bottom-start">bottom-start</option><option value="bottom-end">bottom-end</option><option value="left">left</option><option value="left-start">left-start</option><option value="left-end">left-end</option></select></label><label class="playground-field" for="playground-combo-box-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-combo-box-autocomplete" name="pg_autocomplete" type="text" value="off" /></label><label class="playground-toggle" for="playground-combo-box-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-combo-box-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-combo-box-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-combo-box-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-combo-box-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-combo-box-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-combo-box-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-combo-box-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-combo-box-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-combo-box-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-page"><span><strong>page</strong><small>number</small></span><input id="playground-combo-box-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-combo-box-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-combo-box-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-combo-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-combo-box-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">Autocomplete</span><h2>Default autocomplete</h2><p>Live default autocomplete combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">01</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-1" class="demo-canvas demo-canvas--1">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Default autocomplete usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Default autocomplete"
  name="combobox-1"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Autocomplete</span><h2>Local HTML options</h2><p>Live local html options combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">02</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-2" class="demo-canvas demo-canvas--2">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Local HTML options" name="combobox-2" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Local HTML options usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Local HTML options"
  name="combobox-2"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Autocomplete</span><h2>Grouped suggestions</h2><p>Live grouped suggestions combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">03</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-3" class="demo-canvas demo-canvas--3">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Grouped suggestions usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Grouped suggestions"
  name="combobox-3"
  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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
        &#125;,
        &#123;
          "value": "support",
          "label": "Support",
          "description": "Customer operations",
          "icon": "icon-[lucide--life-buoy]",
          "color": "#f59e0b"
        &#125;
      ]
    &#125;
  ]'
  placeholder="Search teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Autocomplete</span><h2>Minimum search length</h2><p>Live minimum search length combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">04</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-4" class="demo-canvas demo-canvas--4">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Minimum search length usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Minimum search length"
  name="combobox-4"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  minSearchLength="3"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Autocomplete</span><h2>Search result limit</h2><p>Live search result limit combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">05</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-5" class="demo-canvas demo-canvas--5">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Search result limit usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Search result limit"
  name="combobox-5"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  searchResultLimit="2"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Autocomplete</span><h2>Starts-with matching</h2><p>Live starts-with matching combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">06</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-6" class="demo-canvas demo-canvas--6">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Starts-with matching usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Starts-with matching"
  name="combobox-6"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  searchMode="startsWith"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Autocomplete</span><h2>Search labels and descriptions</h2><p>Live search labels and descriptions combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">07</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-7" class="demo-canvas demo-canvas--7">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Search labels and descriptions usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Search labels and descriptions"
  name="combobox-7"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Templates & states</span><h2>Suggestions with icons</h2><p>Live suggestions with icons combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">08</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-8" class="demo-canvas demo-canvas--8">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Suggestions with icons usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Suggestions with icons"
  name="combobox-8"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  optionTemplate="icon"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Templates & states</span><h2>Suggestions with avatars</h2><p>Live suggestions with avatars combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">09</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-9" class="demo-canvas demo-canvas--9">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Suggestions with avatars usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Suggestions with avatars"
  name="combobox-9"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  optionTemplate="avatar"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Templates & states</span><h2>Suggestions with color indicators</h2><p>Live suggestions with color indicators combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">010</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-10" class="demo-canvas demo-canvas--10">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Suggestions with color indicators usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Suggestions with color indicators"
  name="combobox-10"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  optionTemplate="color"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Templates & states</span><h2>Clearable value</h2><p>Live clearable value combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">011</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-11" class="demo-canvas demo-canvas--11">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Clearable value" name="combobox-11" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Clearable value usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Clearable value"
  name="combobox-11"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Templates & states</span><h2>Custom text values</h2><p>Live custom text values combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">012</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-12" class="demo-canvas demo-canvas--12">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Custom text values" name="combobox-12" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Custom text values usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Custom text values"
  name="combobox-12"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  allowCustomValue="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Templates & states</span><h2>Preselected value</h2><p>Live preselected value combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">013</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-13" class="demo-canvas demo-canvas--13">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Preselected value" name="combobox-13" value="engineering" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Preselected value usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Preselected value"
  name="combobox-13"
  value="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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Templates & states</span><h2>Disabled combobox</h2><p>Live disabled combobox combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">014</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-14" class="demo-canvas demo-canvas--14">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Disabled combobox usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Disabled combobox"
  name="combobox-14"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  disabled="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Templates & states</span><h2>Validation state</h2><p>Live validation state combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">015</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-15" class="demo-canvas demo-canvas--15">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
          </div>
          <section class="demo-code" aria-label="Validation state 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;ComboBox
  label="Validation state"
  name="combobox-15"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  required="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Remote & API</span><h2>Remote data with automatic preload</h2><p>Live remote data with automatic preload combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">016</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-16" class="demo-canvas demo-canvas--16">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Remote data with automatic preload usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Remote data with automatic preload"
  name="combobox-16"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search remote teams"
  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">Remote & API</span><h2>Remote search API</h2><p>Live remote search api combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">017</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-17" class="demo-canvas demo-canvas--17">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Remote search API usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Remote search API"
  name="combobox-17"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search remote teams"
  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">Remote & API</span><h2>Remote query parameters</h2><p>Live remote query parameters combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">018</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-18" class="demo-canvas demo-canvas--18">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Remote query parameters usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Remote query parameters"
  name="combobox-18"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search remote teams"
  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">Remote & API</span><h2>Infinite remote suggestions</h2><p>Live infinite remote suggestions combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">019</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-19" class="demo-canvas demo-canvas--19">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
          </div>
          <section class="demo-code" aria-label="Infinite remote suggestions usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Infinite remote suggestions"
  name="combobox-19"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search remote teams"
  minSearchLength="2"
  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">Remote & API</span><h2>Fixed-position suggestions</h2><p>Live fixed-position suggestions combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">020</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-20" class="demo-canvas demo-canvas--20">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="Fixed-position suggestions usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="Fixed-position suggestions"
  name="combobox-20"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
  fixed="true"
/&gt;</code></pre>
          </section>
        </div>
      </article>
      <article class="demo-case">
        <header class="demo-case-header">
          <div><span class="demo-case-eyebrow">Remote & API</span><h2>JavaScript methods</h2><p>Live javascript methods combobox with editable autocomplete and copyable component code.</p></div>
          <span class="demo-case-number">021</span>
        </header>
        <div class="demo-workbench">
          <div id="combo-box-demo-21" class="demo-canvas demo-canvas--21">
            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
            
            <div class="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
          </div>
          <section class="demo-code" aria-label="JavaScript methods usage">
            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
            <pre><code>&lt;ComboBox
  label="JavaScript methods"
  name="combobox-21"
  options='[
    &#123;
      "value": "design",
      "label": "Design",
      "description": "Product and visual design",
      "icon": "icon-[lucide--palette]",
      "color": "#8b5cf6",
      "avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%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=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
    &#125;,
    &#123;
      "value": "support",
      "label": "Support",
      "description": "Customer operations",
      "icon": "icon-[lucide--life-buoy]",
      "color": "#f59e0b"
    &#125;
  ]'
  groups='[]'
  placeholder="Search teams"
/&gt;</code></pre>
          </section>
        </div>
      </article></div></section>
        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@search</code><span>Fires when the current search query changes.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</span></div><div><code>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@load</code><span>Fires after remote or deferred content loads successfully.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;ComboBox
  @search='console.log(event.detail)'
  @select='console.log(event.detail)'
  @change='console.log(event.detail)'
  @clear='console.log(event.detail)'
  @open='console.log(event.detail)'
  @close='console.log(event.detail)'
  @load='console.log(event.detail)'
  @error='console.log(event.detail)'
/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"ComboBox\"], [data-component=\"ComboBox\"]")

component?.addEventListener("search", (event) =&gt; &#123;
  console.log("search", event.detail)
&#125;)

component?.addEventListener("select", (event) =&gt; &#123;
  console.log("select", event.detail)
&#125;)

component?.addEventListener("change", (event) =&gt; &#123;
  console.log("change", event.detail)
&#125;)

component?.addEventListener("clear", (event) =&gt; &#123;
  console.log("clear", event.detail)
&#125;)

component?.addEventListener("open", (event) =&gt; &#123;
  console.log("open", event.detail)
&#125;)

component?.addEventListener("close", (event) =&gt; &#123;
  console.log("close", event.detail)
&#125;)

component?.addEventListener("load", (event) =&gt; &#123;
  console.log("load", event.detail)
&#125;)

component?.addEventListener("error", (event) =&gt; &#123;
  console.log("error", event.detail)
&#125;)</code></pre></section></div></div></section>
        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"ComboBox"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>options</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>groups</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Search or select an option"</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Start typing…"</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowCustomValue</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>loadingLabel</code></td><td>string</td><td><code>"Loading suggestions…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No matching options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear value"</code></td><td>No</td></tr><tr><td><code>toggleLabel</code></td><td>string</td><td><code>"Toggle suggestions"</code></td><td>No</td></tr><tr><td><code>searchMode</code></td><td>string</td><td><code>"contains"</code></td><td>No</td></tr><tr><td><code>searchFields</code></td><td>string</td><td><code>"label,description"</code></td><td>No</td></tr><tr><td><code>minSearchLength</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>searchResultLimit</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>optionTemplate</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>closeOnSelect</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fixed</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"off"</code></td><td>No</td></tr><tr><td><code>remote</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>remoteUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>remoteQueryParam</code></td><td>string</td><td><code>"q"</code></td><td>No</td></tr><tr><td><code>remoteDebounce</code></td><td>number</td><td><code>250</code></td><td>No</td></tr><tr><td><code>remoteAutoLoad</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>infinite</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>hasMore</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>loadMoreLabel</code></td><td>string</td><td><code>"Load more"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
      </main>
      <aside class="detail-aside">
        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#combo-box-demo-1">Default autocomplete</a><a href="#combo-box-demo-2">Local HTML options</a><a href="#combo-box-demo-3">Grouped suggestions</a><a href="#combo-box-demo-4">Minimum search length</a><a href="#combo-box-demo-5">Search result limit</a><a href="#combo-box-demo-6">Starts-with matching</a><a href="#combo-box-demo-7">Search labels and descriptions</a><a href="#combo-box-demo-8">Suggestions with icons</a><a href="#combo-box-demo-9">Suggestions with avatars</a><a href="#combo-box-demo-10">Suggestions with color indicators</a><a href="#combo-box-demo-11">Clearable value</a><a href="#combo-box-demo-12">Custom text values</a><a href="#combo-box-demo-13">Preselected value</a><a href="#combo-box-demo-14">Disabled combobox</a><a href="#combo-box-demo-15">Validation state</a><a href="#combo-box-demo-16">Remote data with automatic preload</a><a href="#combo-box-demo-17">Remote search API</a><a href="#combo-box-demo-18">Remote query parameters</a><a href="#combo-box-demo-19">Infinite remote suggestions</a><a href="#combo-box-demo-20">Fixed-position suggestions</a><a href="#combo-box-demo-21">JavaScript methods</a><a href="#events">Events</a><a href="#api">Props API</a></div>
      </aside>
    </div>
    <nav class="detail-pagination">
      <a href="/components/advanced-select"><small>Previous</small><strong>← Advanced Select</strong></a>
      <a href="/components/copy-markup"><small>Next</small><strong>Copy Markup →</strong></a>
    </nav>
  }
}