All: Switch from .tsmb-form to <typesense-minibar>

Ref https://github.com/jquery/typesense-minibar.

Author: Krinkle

themes/jquery/css/base.css

@@ -1236,7 +1236,7 @@ nav#main li.current a {
 	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
 }
 
-.tsmb-form {
+typesense-minibar {
 	--tsmb-size-radius: 5px;
 	--tsmb-size-base: 12px;
 	--tsmb-size-sm: 0.8rem;
@@ -1252,29 +1252,29 @@ nav#main li.current a {
 	--tsmb-color-primary50: #0769ad;  /* jQuery Primary Blue */
 	--tsmb-color-primary90: #b4efff; /* oklch(0.92 0.07 228) hue=228 of #7ACEF4 (jQuery Secondary Blue) */
 }
-.jquery-ui .tsmb-form {
+.jquery-ui typesense-minibar {
 	--tsmb-color-primary50: #b24926; /* jQuery UI Secondary Orange */
 	--tsmb-color-primary90: #ffddb2; /* = #b4efff + oklch(hue=70) of #FAA523 (jQuery UI Primary Orange) */
 }
-.jquery-mobile .tsmb-form {
+.jquery-mobile typesense-minibar {
 	--tsmb-color-primary50: #108040; /* jQuery Mobile Secondary Green */
 	--tsmb-color-primary90: #c9f2c8; /* = #b4efff + oklch(hue=144) of #3EB249 (jQuery UI Primary Orange) */
 }
-.jquery-foundation .tsmb-form {
+.jquery-foundation typesense-minibar {
 	--tsmb-color-primary50: #333; /* jQuery Black */
 	--tsmb-color-primary90: #ccc;
 }
-.jquery-learn .tsmb-form {
+.jquery-learn typesense-minibar {
 	--tsmb-color-primary50: #222;
 	--tsmb-color-primary90: #ccc;
 }
-.tsmb-form:not(:focus-within)::before {
+typesense-minibar form:not(:focus-within)::before {
   filter: invert();
 }
-.tsmb-form input[type=search] {
+typesense-minibar input[type=search] {
 	border-width: 0;
 }
-.tsmb-form [role="option"] mark {
+typesense-minibar[role="option"] mark {
   border-bottom: 2px solid var(--tsmb-color-primary90);
 }
 

themes/jquery/header.php

@@ -19,7 +19,7 @@
 
 	<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/i/favicon.ico">
 	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/typesense-minibar/typesense-minibar.css?v=1.3.2">
-	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/base.css?v=16">
+	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/base.css?v=17">
 	<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>?v=8">
 
 	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

themes/jquery/searchform.php

@@ -3,7 +3,7 @@
  * The template for displaying search forms
  */
 ?>
-<form role="search" class="searchform tsmb-form" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get"<?php
+<typesense-minibar<?php
 	if ( jq_search_get_provider() === 'typesense' ) :
 		$typesenseKey = get_option( 'jquery_typesense_key' );
 		$typesenseCollection = get_option( 'jquery_typesense_collection' );
@@ -15,6 +15,8 @@
 <?php
 	endif;
 ?>>
+	<form role="search" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
 	<input type="search" name="s" aria-label="Search <?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" value="<?php echo get_search_query(); ?>" placeholder="Search" autocomplete="off">
 	<button type="submit" class="visuallyhidden"></button>
 </form>
+</typesense-minibar>