title: Search
label: Search
status: beta
preview: '@preview--nogrid'

context:
  exampleMultiColumns: "false"
  component-type: block

variants:
  - name: default
    label: Search
    hidden: true

  - name: responsive
    label: Responsive Search
    context:
      responsive: true
      search_action: '#'
      search_autofocus: false
      search_button: Search
      search_label: Search
      search_placeholder: Enter your search terms
      search_id: searchitem
      search_value_default: ''

  - name: responsive results
    label: Responsive with Results
    context:
      results: true
      responsive: true
      search_action: '#'
      search_autofocus: false
      search_button: Search
      search_label: Search
      search_placeholder: Enter your search terms
      search_id: searchitem
      search_value_default: ''

  - name: mini
    label: Mini Search
    context:
      mini: true
      search_action: '#'
      search_autofocus: false
      search_button: Search
      search_label: Search
      search_placeholder: Enter your search terms
      search_id: searchitem
      search_value_default: ''

  - name: mini results
    label: Mini with Results
    context:
      mini: true
      results: true
      search_action: '#'
      search_autofocus: false
      search_button: Search
      search_label: Search
      search_placeholder: Enter your search terms
      search_id: searchitem
      search_value_default: ''

  - name: container
    label: Search Container
    context:
      responsive: true
      search__background: "var(--vf-color--neutral--100)"
      search_action: '#'
      search_autofocus: false
      search_button: Search
      search_label: Search
      search_placeholder: Enter your search terms
      search_id: searchitem
      search_value_default: ''

  - name: container results
    label: Search Container with Results
    context:
      responsive: true
      results: true
      search__background: "var(--vf-color--neutral--100)"
      search_action: '#'
      search_autofocus: false
      search_button: Search
      search_label: Search
      search_placeholder: Enter your search terms
      search_id: searchitem
      search_value_default: ''
